MultiSelect component renders a dropdown menu select field where a user can select multiple values. Commonly used within the Form component.
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. |