> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 7765dcb0-dcf8-4e1c-8028-eb8cbef0f7f9
---

# MultiSelect

> Learn about the MultiSelect component for use in UI extensions.

The `MultiSelect` component renders a dropdown menu select field where a user can select multiple values. Commonly used within the [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form) component.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/ui-extensions-component-multiselect.png" alt="ui-extensions-component-multiselect" />
</Frame>

```jsx theme={null}
import { Form, MultiSelect, Button } from "@hubspot/ui-extensions";

function MultiSelectControlledExample() {
  const [formValue, setFormValue] = useState([]);
  return (
    <Form preventDefault={true} onSubmit={() => console.log(formValue, "hola")}>
      <MultiSelect
        value={formValue}
        placeholder="Pick your Products"
        label="Select Multiple Products"
        name="selectProduct"
        required={true}
        onChange={value => setFormValue(value)}
        options={[
          { label: "Amazing Product 1", value: "p1" },
          { label: "Amazing Product 2", value: "p2" },
          { label: "Amazing Product 3", value: "p3" },
          { label: "Amazing Product 4", value: "p4" },
          { label: "Amazing Product 5", value: "p5" },
          { label: "Amazing Product 6", value: "p6" },
        ]}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## Props

| Prop                | Type                                    | Description                                                                                                                                                                                                                                               |
| ------------------- | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `description`       | String                                  | Text that describes the field's purpose.                                                                                                                                                                                                                  |
| `error`             | Boolean                                 | When set to `true`, `validationMessage` is displayed as an error message if provided. The input will also render its error state to let the user know there's an error. If left `false` (default), `validationMessage` is displayed as a success message. |
| `label`             | String                                  | The text that displays above the dropdown menu.                                                                                                                                                                                                           |
| `name`              | String                                  | The input's unique identifier.                                                                                                                                                                                                                            |
| `onChange`          | `(value: (string \| number)[]) => void` | A callback function that is invoked when the value is committed.                                                                                                                                                                                          |
| `options`           | Array                                   | The options to display in the dropdown menu. `label` will be used as the display text, and `value` should be the option's unique identifier, which is submitted with the form.                                                                            |
| `readOnly`          | Boolean                                 | When set to `true`, users will not be able to enter a value into the field. Set to `false` by default.                                                                                                                                                    |
| `required`          | Boolean                                 | When set to `true`, displays a required field indicator.                                                                                                                                                                                                  |
| `tooltip`           | String                                  | The text that displays in a tooltip next to the label.                                                                                                                                                                                                    |
| `validationMessage` | String                                  | The text to display if the input has an error.                                                                                                                                                                                                            |
| `value`             | String \| number                        | The value of the input.                                                                                                                                                                                                                                   |

## Related components

* [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form)
* [DateInput](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/date-input)
* [NumberInput](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/number-input)
* [Select](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/select)