Skip to main content
🏠FormMultiselectVersion: 2.0.0-beta.15

Multiselect

Dropdown multiselect allows users to select multiple items from a list of predefined items in a dropdown menu. Items are displayed as checkboxes to make the user understand the multiselection capability.

Use the options property to set options to the multiselect component. By setting the value property, options can be checked at the first render.

<Multiselect
  placeholder="Default multiselect"
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" }
  ]}
/>

<Multiselect
  placeholder="Multiselect with checked options"
  value={["france"]}
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" }
  ]}
/>

Sizes​

The multiselect component can be rendered in small, medium and large sizes.

<Multiselect
  size="small"
  placeholder="Select an option"
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" }
  ]}
/>

<Multiselect
  size="medium"
  placeholder="Select an option"
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" }
  ]}
/>

<Multiselect
  size="large"
  placeholder="Select an option"
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" }
  ]}
/>

Placement​

The multiselect list can be displayed on top or bottom using the placement property.

<Multiselect
  placeholder="Select an option"
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" }
  ]}
/>

<Multiselect
  placement="top"
  placeholder="Select an option displayed on top"
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" }
  ]}
/>

Scrollable​

Set the scrollable property to true to make the multiselect component scrollable. By default, 6 options are displayed. You can change the number of displayed options by setting the nbVisibleOptions property.

<Multiselect
  scrollable
  placeholder="Default scrollable multiselect"
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" },
    { value: "portugal", label: "Portugal" },
    { value: "germany", label: "Germany" },
    { value: "england", label: "England" },
    { value: "norway", label: "Norway" }
  ]}
/>

<Multiselect
  scrollable
  nbVisibleOptions={4}
  placeholder="Scrollable multiselect with 4 displayed options"
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" },
    { value: "portugal", label: "Portugal" },
    { value: "germany", label: "Germany" },
    { value: "england", label: "England" },
    { value: "norway", label: "Norway" }
  ]}
/>

Disabled​

Add the disabled property to disable the multiselect component. You can also disable individual options by setting the disabled property on specific options.

<Multiselect
  disabled
  placeholder="Disabled multiselect"
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" }
  ]}
/>

<Multiselect
  placeholder="Multiselect with disabled option"
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy", disabled: true },
    { value: "spain", label: "Spain" }
  ]}
/>

Custom Rendering​

You can customize how the selected values are displayed in the multiselect input using the renderValue property. This property accepts a function that takes the selected options and returns a string.

<Multiselect
  placeholder="Custom renderValue"
  options={[
    { value: 'france', label: 'France' },
    { value: 'italy', label: 'Italy' },
    { value: 'spain', label: 'Spain' }
  ]}
  renderValue={(selected) =>
    `Selected: ${selected
      .sort(
        (a, b) =>
          ['france', 'italy', 'spain'].indexOf(a.value) - ['france', 'italy', 'spain'].indexOf(b.value)
      )
      .map(option => option.label)
      .join(', ')}`
  }
/>

Autosuggest​

You can activate the Autosuggest to filter through the list of items to give the user a smaller range of options to choose from.

<Multiselect
  isSearchable
  placeholder="Searchable multiselect"
  options={[
    { value: 'france', label: 'France' },
    { value: 'italy', label: 'Italy' },
    { value: 'spain', label: 'Spain' }
  ]}
/>

Event Handling​

The Multiselect component provides several event handlers to manage user interactions:

onValueChanged​

Triggered when a user selects or deselects an option. The callback receives an array of the selected values.

const handleValueChange = (values) => {
  console.log('Selected values:', values);
  
  // You can update state or perform other actions
  setSelectedCountries(values);
  updateUserPreferences(values);
};

<Multiselect
  onValueChanged={handleValueChange}
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" }
  ]}
/>

onBlur​

Triggered when the multiselect loses focus.

const handleBlur = (event) => {
  console.log('Multiselect lost focus');
  validateField(event.target.value);
};

<Multiselect
  onBlur={handleBlur}
  options={[
    { value: "france", label: "France" },
    { value: "italy", label: "Italy" },
    { value: "spain", label: "Spain" }
  ]}
/>

onFocus​

Triggered when the multiselect receives focus.

const handleFocus = (event) => {
  console.log('Multiselect gained focus');
};

<Multiselect
  onFocus={handleFocus}
  options={[...]}
/>

onClose​

Triggered when the dropdown menu closes.

const handleClose = () => {
  console.log('Multiselect dropdown closed');
};

<Multiselect
  onClose={handleClose}
  options={[...]}
/>

Note that when a multiselect is disabled (disabled={true}), these events will not be triggered.

Custom Classes​

Add your own classes in the `