MultiSelect

The <MultiSelect> component can be used when you need a select component to support multiple options simultaneously.

The state of the multi-select is handled by the parent component. An onChange prop handler is provided that will be called with the updated list of options whenever there's a change.

Multi-select also supports nested options See Nested Options. When a parent option is selected, all children will be selected. If all children are selected, the parent will be selected too.

NOTE: This is a controlled component, so don't forget to pass the updated props to MultiSelect to see the changes. See Example

Options

Options determine the construction of the multi-select menu. It takes an Array of Objects with the following shape:

{
    name: 'John', // label displayed next to the checkbox
    value: 'john', // value associated with the option
    selected: true // current selected state
}
Copy

UlStyle

UlStyle gives you the option to set a special style specifically to your options list:

{ 
    maxHeight: '250px', // options list maxHeight
    overflowY: 'auto', // allows you to expand the list and make it more visible in narrowed spaces, like in a table row.
    position: 'relative'
}
Copy

UlStyle

UlStyle gives you the option to set a special style specifically to your options list:

{ 
    maxHeight: '250px', // options list maxHeight
    overflowY: 'auto', // allows you to expand the list and make it more visible in narrowed spaces, like in a table row.
    position: 'relative'
}
Copy

Here's an example of a possible set of options:

const people = [
    {
        name: 'John',
        value: 'john',
        selected: true
    },
    {
        name: 'Sam',
        value: 'sam',
        selected: false
    },
    {
        name: 'Jane',
        value: 'jane',
        selected: true
    },
    {
        name: 'Sara',
        value: 'sara',
        selected: false
    }
];
Copy

Nested Options

You may also have nested options. Here's an example:

const pets = [
    {
        name: 'All Pets',
        value: 0,
        selected: false
    },
    {
        name: 'Dogs',
        value: 1,
        selected: false,
        options: [
            {
                name: 'Lassie',
                value: 1,
                selected: true
            },
            {
                name: 'Snoopy',
                value: 2,
                selected: true
            }
        ]
    },
    {
        name: 'Cats',
        value: 'cats',
        selected: false,
        options: [
            {
                name: 'Grumpy Cat',
                value: 1,
                selected: true
            },
            {
                name: 'Lil Bub',
                value: 2,
                selected: true
            }
        ]
    }
];
Copy

Full Example

const [pets, setPets] = useState(initialPetsObject);
return <MultiSelect onChange={newPets => setPets(newPets)} options={pets} size="md" />;
Copy

Component Example

Component Example Source

<MultiSelect
  onChange={function noRefCheck(){}}
  options={[
    {
      name: 'Lassie',
      selected: true,
      value: 1
    },
    {
      name: 'Snoopy',
      selected: true,
      value: 2
    },
    {
      name: 'Toto',
      selected: false,
      value: 3
    },
    {
      name: 'Brian Griffin',
      selected: false,
      value: 3
    }
  ]}
  placeholder="Select an option"
  ulStyle={{
    maxHeight: '250px',
    overflowY: 'auto',
    position: 'relative'
  }}
/>

MultiSelect Props