Contexto
Dropdown, select e combo box resolvem problemas diferentes, embora muitas interfaces tratem todos como o mesmo controle. A decisão depende do tamanho da lista, da necessidade de comparar opções, da possibilidade de digitar um valor conhecido e de a escolha ser única ou múltipla.
Não use dropdown por padrão. Use-o quando a pessoa precisa escolher um único valor entre opções predefinidas, a lista não precisa ficar sempre visível e o controle reduz a entrada inválida. Quando a lista é curta, extensa, múltipla ou exige busca, escolha uma apresentação mais adequada à tarefa.
Escolha o controle a partir da tarefa, não apenas do espaço disponível.
Use dropdown ou select para uma escolha única entre valores predefinidos, quando as opções não precisam ficar sempre visíveis, a ordem for previsível e o controle compacto trouxer benefício real.
Prefira opções visíveis quando a lista for curta e a comparação ajudar a decidir. Use rádio, cartões ou lista aberta.
Prefira autocomplete ou combo box quando a lista for longa, a pessoa souber parte do valor ou precisar localizar um item específico. Deixe claro se valores personalizados são aceitos.
Prefira caixas de seleção ou lista de múltipla escolha quando mais de um valor puder ser selecionado.
Separe campos de formulário de menus de ação e navegação. Para comandos, use um botão com menu. Para navegação, use uma estrutura de navegação.
Quando a necessidade for encontrar um valor conhecido, consulte também quando usar preenchimento automático. Em filtros, avalie se as opções precisam ficar visíveis e se o estado aplicado será fácil de revisar.
Regra prática
Se a lista tem poucas opções, mostre-as. Se tem muitas opções, ajude a pesquisar. Use dropdown quando a escolha é única, fechada e melhor resolvida com um controle compacto.
Base da recomendação
Baymard documenta que dropdowns curtos podem acrescentar abertura desnecessária e listas longas podem dificultar compreensão e navegação. Esses limites são heurísticas para ecommerce, não uma lei universal. Nielsen Norman Group reforça o equilíbrio entre economizar espaço e esconder opções. W3C detalha semântica e teclado para comboboxes. IBM Carbon diferencia dropdown, dropdown filtrável, multiselect e combo box. A recomendação é contextual e deve ser validada com as tarefas e o domínio.
Porque isso importa?
Um dropdown esconde as opções até a pessoa abrir o controle. Isso pode manter a interface compacta, mas acrescenta uma etapa e reduz a capacidade de comparar alternativas.
Em listas pequenas, a pessoa pode abrir o controle apenas para descobrir o que existe. Em listas longas, pode percorrer muitas linhas sem visão geral ou busca. Se o controle for customizado, ainda será necessário manter nome acessível, foco, teclado, estado expandido, seleção e anúncio corretos.
Um controle visível apoia reconhecimento; uma busca apoia localização; um dropdown compacto apoia uma escolha única e previsível. Para nomes e instruções dos campos, veja também labels ou placeholders.
Quando usar?
- Uma única opção deve ser escolhida.
- Os valores são predefinidos e mutuamente exclusivos.
- A lista tem ordem previsível ou um padrão sensato.
- As alternativas não precisam ficar visíveis para comparação constante.
- O espaço é limitado e o ganho de compactação é relevante.
- A entrada precisa ser restrita a valores válidos.
- A lista é média e pode ser percorrida sem esforço excessivo.
- O select nativo atende à tarefa e à acessibilidade.
Quando evitar?
- Há poucas opções e a comparação ajuda a decidir.
- A lista é extensa e exige rolagem repetida.
- A pessoa sabe o valor que procura e pode digitá-lo.
- Mais de uma opção pode ser selecionada.
- Não existe um padrão sensato e neutro.
- A seleção é uma ação ou comando.
- O controle será usado como navegação principal.
- O componente customizado não tem semântica, foco e teclado completos.
Recomendações
Faça
- Defina se a escolha é única ou múltipla.
- Observe se as opções precisam ser comparadas.
- Verifique se a pessoa conhece o valor que procura.
- Use select nativo quando ele resolver a tarefa.
- Use opções visíveis para listas curtas.
- Use autocomplete para listas longas ou valores conhecidos.
- Mostre o valor selecionado com rótulo persistente.
- Teste teclado, leitor de tela, zoom e telas estreitas.
Evite
- Escolher dropdown apenas para economizar espaço.
- Esconder alternativas simples.
- Colocar lista extensa sem busca ou agrupamento.
- Usar dropdown para múltiplas seleções sem resumo.
- Confundir campo com menu de comando.
- Usar placeholder como único rótulo.
- Construir combobox sem teclado completo.
- Aplicar limites numéricos como regra rígida.
