Select / Autocomplete
- Angular:
mds-select - CSS/HTML (mds-styles): Select
- Figma: ✅ — abrir Design System 2.0 ↗ (busque pelo frame “Dropdown” dentro do arquivo)
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Select permite ao usuário escolher uma ou mais opções de uma lista predefinida. Ele possui funcionalidade de busca integrada (autocomplete), facilitando a localização de itens em listas extensas através da digitação.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Busca Integrada: O campo deve filtrar as opções em tempo real conforme o usuário digita.
- Texto de Marcação (Placeholder): Indique que o campo é interativo. Não use reticências.
- Certo: Pesquisar transportadora ou Selecione o estado
- Feedback de Busca: Se a digitação não encontrar resultados, exiba a mensagem: Nenhum resultado encontrado.
- Rótulos (Labels): Devem ser curtos e descritivos. Use Caixa de Sentença.
- Seleção Múltipla: Se o componente permitir escolher mais de um item, utilize tags (chips) dentro do campo para indicar o que já foi selecionado.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Prolixo) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Filtro de Veículo | Escolha qual o veículo da frota… | Veículo |
| Localidade | Digite o nome da cidade para buscar | Cidade de destino |
| Status | Qual o estado atual desta carga? | Status da carga |
Sugestão de Padronização
- O termo Dropdown no Figma, causa conflito com o “Menu de Ações”. O termo Autocomplete descreve apenas uma funcionalidade do campo. Select descreve o objetivo (selecionar um dado).
- Ação: Padronizar como Select. No documento, deixe claro que o Select possui a função de busca (autocomplete) integrada.