Multi Select

Use the multi-select component to select more than 1 item from a list. The list usually contains 5 or more items. It allows to search and shows the items that have already been selected or select all items at once.

Best practices

Order the list by frequency of use, and if applicable, in ascending order.
If the list shows less than 5 items, consider displaying directly on the screen, using the Checkbox component.
Whenever possible group the options and use short labels to describe the content (E.g.: In a food combo, the options can be grouped by: Vegetable, fruits, etc.)
For a situation where the user can select only one option, use Select or Radio Button.

Example

Favorite pasta*

import { FormControl, Select } from '@lemonade/ui'
import React from 'react'

const items = ['Carbonara', 'Gnocchi', 'Lasagna', 'Macaroni and Cheese', 'Pesto', 'Pizza']

function MultiSelect() {
  const itemToString = (item: any) => item

  return (
    <FormControl label='Favorite pasta' required>
      <Select<string> items={items} itemToString={itemToString} name='favorite pasta' multiple required />
    </FormControl>
  )
}

export default MultiSelect