O Dropdown é uma família de componentes que permite ao usuário selecionar opções ou acessar ações dentro de uma lista colapsável.
Ele não é um único componente, mas um padrão estrutural base, do qual derivam variações com comportamentos e finalidades distintas.
Essa família inclui:
- Select
- Combobox
- Autocomplete
- Menu (Action Menu / Context Menu)
- Multi-select
- Searchable Select
A escolha correta da variação é essencial para manter clareza, acessibilidade e consistência.
Estrutura Base (Anatomia Comum)
Todos os componentes da família Dropdown compartilham uma estrutura conceitual:
- Trigger
- Overlay / Lista
- Item de Opção
- Estado Ativo / Selecionado
- Feedback Visual
Trigger
Elemento que ativa o dropdown.
Pode ser:
- Input
- Botão
- Campo de formulário
Responsável por:
- Abrir/fechar lista
- Exibir valor selecionado
- Indicar estado (ícone de seta)
Overlay / Lista
Container flutuante que exibe as opções.
Características:
- Posicionamento relativo ao trigger
- Scroll quando necessário
- Elevação superior ao conteúdo base
- Pode conter agrupamentos
2.3 Item
Cada opção da lista.
Pode conter:
- Texto
- Ícone
- Descrição
- Estado disabled
- Indicador de seleção
2.4 Estados Comuns
- Default
- Hover
- Focus
- Active
- Selected
- Disabled
- Error (quando aplicado a formulário)
Variações do Dropdown
3.1 Select
O que é
Componente de seleção simples, substituto estilizado do <select> nativo.
Quando usar
- Listas fechadas
- Até 10–15 opções
- Seleção única
- Cenários formais (formulários)
Características
- Não editável
- Valor fixo
- Pode possuir placeholder
- Pode ter validação
Quando NÃO usar
- Quando o usuário precisa digitar
- Listas muito extensas
- Busca avançada
Matriz de Decisão
| Cenário | Componente Ideal |
|---|---|
| Seleção simples até 10 opções | Select |
| Lista grande com filtro | Combobox |
| Sugestão dinâmica por API | Autocomplete |
| Ações administrativas | Menu |
| Múltiplas escolhas | Multi-select |
| Select com busca interna | Searchable Select |
Comportamento e Interação
Abertura
- Click
- Enter
- Space
- Seta para baixo (teclado)
Navegação por Teclado
- ↑ / ↓ navegam entre itens
- Enter seleciona
- Esc fecha
- Tab move foco
Fechamento
- Clique fora
- Esc
- Seleção de item (quando aplicável)
Acessibilidade
Implementações devem seguir:
role="combobox"(quando aplicável)aria-expandedaria-controlsaria-activedescendantrole="listbox"role="option"
Menu de ações:
role="menu"role="menuitem"
Evitar:
- Dropdowns que não respondem a teclado
- Overlay sem gerenciamento de foco
Boas Práticas
Faça
- Limite altura máxima da lista
- Use scroll interno
- Indique item selecionado
- Mantenha largura coerente com trigger
- Use debounce em autocomplete remoto
Não Faça
- Não use dropdown para mais de 50 opções sem busca
- Não esconda ações críticas dentro de menu sem necessidade
- Não misture seleção e ação no mesmo componente
- Não permita digitação livre quando a lista é restrita
Erros Comuns
- Usar Menu quando deveria ser Select
- Usar Select quando deveria ser Autocomplete
- Não tratar estados vazios
- Não tratar loading
- Não indicar erro de validação
Resumo Estratégico
A família Dropdown deve ser usada com clareza conceitual:
- Select → escolha controlada
- Combobox → escolha com filtro
- Autocomplete → sugestão inteligente
- Menu → ação
- Multi-select → múltiplas escolhas
Escolher a variação correta melhora:
- Usabilidade
- Performance
- Acessibilidade
- Clareza semântica
- Consistência do Design System