Multi Select

São usados quando há a opção de selecionar mais de um item de uma lista e conta com 5 ou mais itens. O componente permite que o usuário realize buscas na lista e também apresenta os itens que já foram selecionados dentro do campo, além da possibilidade de selecionar todos os itens de uma vez.

Boas práticas

A ordem dos itens da lista deve ser baseada na frequência de uso e, se aplicável, em ordem crescente.
Se a lista possuir menos de 5 itens, é recomendável que as opções sejam apresentadas diretamente na tela utilizando o componente de Checkbox.
Sempre que possível agrupe as opções e utilize títulos curtos que descrevam o conteúdo da categoria (Ex.: Em um combo de alimentos, as opções podem ser agrupadas por: vegetais, frutas, etc.).
Para situações onde é possível selecionar apenas um item utilize Select ou Radio Button.

Exemplo

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