Pular para o conte√ļdo principal

Select

Vis√£o geral#

O componente select permite que as pessoas usu√°rias escolham uma item em uma lista e, a partir da sele√ß√£o, apliquem ou continuem a√ß√Ķes para esse item selecionado. Para garantir a consist√™ncia das informa√ß√Ķes, o componente select n√£o permite que a pessoa usu√°ria informe um valor diferente dos valores determinados.

Anatomia#

O componente select, em sua versão unitária (single) é composto por:

Select na vers√£o single, indicando as 6 partes

1. Placeholder

2. Border

3. Background

4. Icon

5. Option (selected)

6. Outline (focus)

note

A listagem de op√ß√Ķes no select √© nativa, ou seja, a forma de apresenta√ß√£o √© vari√°vel, de acordo com o dispositivo ou navegador.

Comportamento#

  • O conte√ļdo do select √© est√°tico e n√£o edit√°vel;
  • Ao clicar no componente, o mesmo apresenta os itens listados;
  • Caso j√° exista um item selecionado, ao abrir a lista de op√ß√Ķes, o foco estar√° no item selecionado;
  • Se nenhuma das op√ß√Ķes/itens for selecionada antes que a caixa de listagem receba o foco, a primeira op√ß√£o recebe o foco;
  • Caso algum item da lista esteja desabilitado, ele continua vis√≠vel nas op√ß√Ķes. Por√©m, todas as fun√ß√Ķes interativas ser√£o removidas dessa op√ß√£o, ignorando cliques, hover, etc;
  • Quando o componente est√° no estado disabled, n√£o √© poss√≠vel abrir a lista de itens e todas as fun√ß√Ķes interativas do componente, incluindo sua a√ß√£o normal e estado de foco tamb√©m permanecem desabilitadas.

Boas pr√°ticas#

  • Deixar uma op√ß√£o pr√©-selecionado, em alguns casos reduz as decis√Ķes e valida√ß√Ķes do usu√°rio. √Äs vezes, isso significa incluir uma op√ß√£o ‚ÄúTodos‚ÄĚ como a primeira op√ß√£o dispon√≠vel;
  • Evite o componente quando a digita√ß√£o for mais r√°pida. As situa√ß√Ķes t√≠picas incluem listas de estados, pa√≠ses, ano de nascimento, idade, etc. √Č muito mais r√°pido para os usu√°rios simplesmente digitar. (NNGroup);
  • Em casos de uso do select sem preenchimento e com placeholder sinalize se √© uma entrada de dados opcional ou obrigat√≥ria;
  • Evite nomes de op√ß√Ķes muito longos facilita a compreens√£o e percep√ß√£o para usu√°rios de leitores de tela (W3.org);
  • Evite come√ßar um conjunto de op√ß√Ķes com a mesma palavra ou frase pois pode atrapalhar significativamente a usabilidade para usu√°rios de teclado e leitor de tela (W3.org);
  • N√£o use dois pontos ao final da descri√ß√£o da label e evite formular suas labels como perguntas;
  • Use label com textos autoexplicativos, com instru√ß√Ķes claras e objetivas, para que o usu√°rio identifique com facilidade qual informa√ß√£o precisa ser inserida.(1.3.5 - Identificar o objetivo de entrada), 3.3.2 - R√≥tulos e instru√ß√Ķes, 2.4.6 - Cabe√ßalhos e r√≥tulos);
  • Nunca use o placeholder para substituir a label do componente. Use o placeholder para trazer mais contexto sobre o tipo de informa√ß√£o que precisa ser adicionada;
  • Se um erro de entrada for detectado automaticamente, o item que est√° com erro √© identificado e o erro √© descrito para o usu√°rio em texto (WCAG 3.3.1: Identifica√ß√£o do erro).

Acessibilidade tratada no componente#

Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente, internamente, e n√£o podem ser alteradas. S√£o elas:

  • A ordem de foco acontecer em sequ√™ncia l√≥gica. Como por exemplo, quando n√£o tem nenhuma op√ß√£o selecionada, o foco deve mover-se para o primeiro item da lista (WCAG 2.4.3: Focus Order);
  • Possibilitar a navega√ß√£o por teclado;
  • Ao interagir por teclado, qualquer pessoa deve conseguir identificar qual √© a sua localiza√ß√£o espacial na tela atrav√©s de um foco (vis√≠vel) identificador de sua localiza√ß√£o (WCAG 2.4.7: Foco vis√≠vel).