Select

É um tipo de input muito utilizado em formulários, onde o usuário está submetendo informações e precisa escolher apenas uma opção de uma lista. Quando o usuário insere algum texto no campo de input, as sugestões são filtradas. É importante apresentar opções de escolha quando ativo.

Boas práticas

A ordem dos itens da lista deve ser baseada na frequência de uso e, se aplicável, em ordem crescente.
Caso seja necessário selecionar mais de uma opção, utilize o Multi Select.
Evite o uso do select para input de dados que são conhecidos pelo usuário, como datas de nascimento.

Exemplo

Selected item: [none]

Favorite pasta*

import { Select, Text, VFlow } from '@lemonade/ui'
import React, { useState } from 'react'

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

function SelectDemo() {
  const [value, setValue] = useState()

  const handleChange = (item: string) => setValue(item)

  const itemToString = (item: string) => item

  return (
    <VFlow>
      <Text>Selected item: {value || '[none]'}</Text>
      <Select<string>
        label='Favorite pasta'
        items={items}
        value={value}
        onChange={handleChange}
        itemToString={itemToString}
        name='favorite pasta'
        required
      />
    </VFlow>
  )
}

export default SelectDemo

Sugestão

Permita que o valor digitado seja o que o usuário digitar, fornecendo uma propriedade createNewItem.

Você pode usar a propriedade openOnFocus para controlar se o menu de sugestões deve aparecer quando a entrada receber o foco - o padrão é falso para as seleções de sugestões (quando createNewItem) e verdadeiro para as seleções normais.

Selected item: [none]

Favorite pasta*

import { Select, Text, VFlow } from '@lemonade/ui'
import React, { useState } from 'react'

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

function SuggestionDemo() {
  const [value, setValue] = useState()

  const handleChange = (item: string) => setValue(item)

  const itemToString = (item: string) => item
  const createNewItem = (inputValue: string) => inputValue

  return (
    <VFlow>
      <Text>Selected item: {value || '[none]'}</Text>
      <Select<string>
        value={value}
        label='Favorite pasta'
        name='favorite pasta'
        items={items}
        onChange={handleChange}
        itemToString={itemToString}
        createNewItem={createNewItem}
        icon={null}
        required
      />
    </VFlow>
  )
}

export default SuggestionDemo