Last modified: August 22, 2025
The MultiSelect component renders a dropdown menu select field where a user can select multiple values. Commonly used within the Form component.
ui-extensions-component-multiselect
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>
  );
}
PropTypeDescription
nameStringThe input’s unique identifier.
labelStringThe text that displays above the dropdown menu.
optionsArrayThe 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.
valueString | numberThe value of the input.
readOnlyBooleanWhen set to true, users will not be able to enter a value into the field. Set to false by default.
requiredBooleanWhen set to true, displays a required field indicator.
tooltipStringThe text that displays in a tooltip next to the label.
descriptionStringText that describes the field’s purpose.
errorBooleanWhen 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.
validationMessageStringThe text to display if the input has an error.
onChange(value: (string | number)[]) => voidA callback function that is invoked when the value is committed.