componentes

select

É um campo de texto com uma lista de opções pré definidas.

índice

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

propertydescriptionrequireddefault valuetype

multi

Turn the select in a multi select mode

falseundefinedboolean

isLoading

Set a loading state to the select dropdown

falseundefinedboolean

onSelect

An array of option(s) that the user has selected

trueundefined(selectedOptions: OptionType[]) => void

appendSelectDropdownTo

An element id to append the select dropdown to a different container element (primary used when using the select inside a modal)

falseundefinedstring

minSearchChars

The minimum number of characters that need to be typed before initiating a search within the list of options.

false0number

label

Set input label

falseundefinedstring

prefix

Input prefix, a string or a component to be used as a prefix

falseundefinedstring | ComponentClass<any, any> | FunctionComponent<any>

disabled

Disables typing on the input

falsefalseboolean

readOnly

Disables typing but improve reading

falsefalseboolean

optionalLabel

Set input optional label

falseundefinedstring

helperText

Text bellow the input

falseundefinedstring

feedback

Input feedback style

falseundefinederrorvalid

showFeedbackIcon

Show Input feedback icon

falsetrueboolean

*valores gerados automaticamente.

callback onSelect

O callback onSelect é chamado toda vez que uma opção é selecionada. O callback recebe um array de objetos (mesmo que o select não esteja com seu modo multi ativado) com as seguintes propriedades:

propriedadedescrição
valuevalor da opção selecionada
texttexto da opção selecionada
categorycategoria da opção selecionada, caso exista. Caso contrário, o valor é undefined
selectedum valor boleano que indica que a opção está selecionada
idid da opção selecionada

utilizando dentro de um modal

OBS: ao utilizar o Select dentro de um modal é necessário alterar o destino do elemento que o dropdown é inserido. Para isso, basta passar o id do elemento destino na propriedade appendSelectDropdownTo, confira o exemplo:

propriedades para estilização (styled props)

Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system para atender cenários não mapeados:

formatação

Formatação do select input. O select é formado por um input text em foco, com um label (1), um campo editável com ícone de seta para baixo (2) e um menu de opções aparente (3).
  1. Input label: pequeno texto que indica o conteúdo esperado do input.
  2. Input field: área de edição do texto e onde abre o menu.
  3. Menu list: lista de preenchimentos possíveis.

uso

O select input é usado quando for necessário coletar dados de uma lista pré definida de opções, normalmente com mais de 3 itens. O select possui autocomplete, que possibilita a busca mais rápida em listas grandes.

Ilustração de página web com um select aberto, mostrando uma lista de opções.
certoUtilize o select para facilitar a busca em listas grandes ou indeterminadas.
Não use componentes como radio button ou checkbox quando a lista de opções for longa.
erradoNão use para selecionar mais de um item da lista.

variações

O select input possui duas variações, single e multi. Confira como utilizar cada uma das variações a seguir:

variaçãouso
single selectUtilizado para seleção de uma única opção da lista.
multi selectUtilizado para seleção de mais de uma opção da lista.

grupos e alinhamento

  • O select input obdece às mesmas regras de alinhamento que os text inputs.
  • O menu do select ocupa a mesma largura do campo de input.
  • A altura máxima do select é fixa e possui rolagem quando o número de itens ultrapassar a mesma.
Ilustração de um formulário. Os dois primeiros campos são text inputs e o terceiro é um select aberto. A largura da lista de opções do select é a mesma do campo de texto.

acessibilidade

Todos os componentes atendem aos requisitos de acessibilidade WCAG 2.1. Caso estejam apresentando algum problema, por favor comunique o time pelo canal #su-front-end-platform.

  • O select deve ser navegável via teclado.
  • Foco se mantem sempre visíveis.
  • Utiliza-se a propriedade listbox para associar o link a seção em que ele se encontra.

guia de conteúdo

  • Utilize opções claras sobre o que está sendo selecionado.
  • Evite frases no negativo.
  • Mantenha as opções em até uma linha de texto.

requisitos do componente

esperado

  • Tem símbolo no Figma.
  • Tem todos estados aplicáveis
  • Use os design tokens.
  • Possui versão responsiva.
  • Tem guia de uso.
  • Tem guia de conteúdo.
  • Possui todas as variações necessárias.
  • Possui versão web.
  • Possui versão mobile.

ideal

  • Atende ao nível AAA de acessibilidade (WCAG 2.1).
  • Tem microinterações no Figma.
  • Possui animações no componente.
  • Tem em todos os frameworks com que trabalhamos.
  • Comporta múltiplos idiomas.

    conteúdo relacionado

    Migração do United para Olist Design System

    Propriedades

    UnitedOlist Design System
    valuevalue
    onChangeonSelect
    size❌
    ❌multi
    ❌isLoading
    ❌appendSelectDropdownTo
    ❌label
    ❌prefix
    ❌disabled
    ❌readOnly
    ❌optionalLabel
    ❌helperText
    ❌feedback
    ❌showFeedbackIcon

    Alterar de SelectFilter (united) para Select

    <SelectFilter
  options={[
    { label: 'olist store', value: 'olist store' },
    { label: 'antonio bandeiras', value: 'antonio bandeiras' },
    { label: 'benetton', value: 'benetton' },
    { label: 'adidas', value: 'adidas' },
    { label: 'apple', value: 'apple' },
  ]}
  placeholder="escolha uma ou mais marcas"
  defaultValue={[{ label: 'apple', value: 'apple' }]}
/>

    demo interativa

    Uma versão de interativa do componente desenvolvido.