Selecionador

Às vezes conhecidos como "dropdowns" ou "selects", os selecionadores permitem que os usuários escolham em uma lista de opções em um espaço limitado.

A lista de opções pode mudar com base no contexto.

Os catadores devem sempre ter uma etiqueta;
Em casos raros em que o contexto é suficiente e um especialista em acessibilidade revisou o design, o rótulo pode ficar indefinido.

As etiquetas podem ser colocadas na parte superior ou na lateral;
Os rótulos superiores são o padrão e são recomendados porque funcionam melhor com textos longos, localização e layouts responsivos;
As etiquetas laterais são mais úteis quando o espaço vertical é limitado.

O texto do espaço reservado, também conhecido como “texto fantasma”, solicita que o usuário selecione uma opção no menu do seletor;
Ele desaparece quando o usuário seleciona uma opção;
O valor mostra a opção que um usuário selecionou.

Selecionadores vêm em quatro tamanhos diferentes:
- pequeno,
- médio,
- grande,
- extra-grande;
O tamanho médio é a opção padrão e mais usada.
Use os outros tamanhos com moderação;
Eles devem ser usados para criar uma hierarquia de importância dentro da página.

Por padrão, os selecionadores têm um plano de fundo visível. Esse estilo funciona melhor em uma matriz densa de controles em que o plano de fundo ajuda a separar a entrada do contêiner ao redor ou a dar visibilidade a botões isolados;
Alternativamente, os selecionadores silenciosos não podem ter um plano de fundo visível. Esse estilo funciona melhor quando um layout claro (pilha vertical, tabela, grade) facilita a análise dos botões;
Muitos componentes silenciosos em um espaço pequeno podem ser difíceis de ler.

Os selecionadores podem ser marcados como opcionais ou obrigatórios, dependendo da situação;
Para selecionadores obrigatórios, há duas opções de estilo: um rótulo “(obrigatório)” ou um asterisco;
Se for usar um asterisco, certifique-se de incluir um texto de dica para explicar o que o asterisco significa;
Os selecionadores opcionais são indicados com texto adicionado ao final do rótulo — “(opcional)” — ou não têm nenhuma indicação;
O asterisco usado neste componente é um ícone que possui espaçamento específico do texto do rótulo — não faz parte do próprio texto do rótulo.

Um selecionador pode ser marcado como tendo um erro para mostrar que um valor precisa ser inserido para avançar ou que um valor inserido é inválido.

Um selecionador em estado desabilitado mostra que existe um campo de entrada, mas não está disponível nessa circunstância;
Isso pode ser usado para manter a continuidade do layout e comunicar que pode ser disponibilizado posteriormente.

Os selecionadores têm uma opção somente leitura para quando o conteúdo no estado desabilitado ainda precisa ser exibido;
Isso permite que o conteúdo seja copiado, mas não interagido ou alterado;
Um selecionador não tem uma opção Somente Leitura se nenhuma seleção tiver sido feita.

Um selecionador pode ter um texto de ajuda abaixo do campo para fornecer contexto ou instruções extras sobre o que um usuário deve selecionar;
A área de texto de ajuda tem duas opções: uma descrição e uma mensagem de erro;
A descrição comunica uma dica ou informações úteis, como requisitos específicos sobre o que escolher;
A mensagem de erro comunica um erro quando os requisitos de seleção não são atendidos, solicitando que o usuário ajuste o que havia selecionado originalmente.

A largura mínima para um seletor é 2× a altura do botão de campo;
Isso garante que os pequenos seletores sejam legíveis e fáceis de segmentar em todos os dispositivos;
Selecionadores silenciosos não possuem largura mínima, sua largura depende do comprimento do texto.

Quando o rótulo do campo e o texto do menu são muito longos para o espaço horizontal disponível, eles se quebram para formar outra linha;
O próprio texto do campo fica cortado no final, mas o texto pode ser mostrado por completo no menu.

O menu do seletor pode ser tão alto quanto necessário para mostrar o maior número possível de opções no espaço disponível;
Não há altura máxima.

Quando possível, a largura do botão de campo deve ser ampla o suficiente para que todos os itens de menu escolhidos possam ser exibidos por completo.

Rótulos de campo, texto de espaço reservado e itens de menu devem estar em maiúsculas e minúsculas.