> ## 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](/docs/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](/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form)
* [DateInput](/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/date-input)
* [NumberInput](/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/number-input)
* [Select](/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/select)