MultiSelect

Select input with support for multiple items. Based on react-select.

If you need to handle single values instead, you can use the Select component.

Props

• inputId = {string}
• name = {string}
• options = {object[]}
• placeholder = {string}
• value = {object}
• onChange = {function}
• renderSelectedOption = {function | default: (item) => item.label}
• selectedOptionsStyle = {object}
• Any props from react-select.

Example with code

import MultiSelect from '@components/MultiSelect';

const MyComponent = () => {
  const options = [{
    label: 'Option 1',
    value: 'first',
  }, {
    label: 'Option 2',
    value: 'second',
  }, {
    label: 'Option 3',
    value: 'third',
  }];

  const handleInputChange = (value, { name }) => {
    console.log(name, value);
  };

  return (
    <MultiSelect
      inputId="my_select"
      instanceId="my_select"
      options={options}
      placeholder="Select an option"
      onChange={handleInputChange}
      isClearable
    />
  );
};