Dropdown vs. Select vs. Combobox
Um dropdown menu executa ações. Um select escolhe de uma lista fixa. Um combobox também deixa você digitar ou pesquisar.
Use um menu para ações. Use um seletor para uma lista curta e fixa. Use uma caixa de combinação para uma lista longa ou pesquisável.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Menu Dropdown & Contextual — Pacote de Aprendizado
Este pacote de aprendizado compara menus pelo modo como eles se abrem. Um menu suspenso abre a partir de um controle. Um menu de contexto pertence a um objeto e frequentemente abre no ponteiro. O pacote não é um único termo padrão de menu.
DropdownMenu / ContextMenuO botão Mais abre ações gerais. Clicar com o botão direito em um arquivo abre ações apenas para esse arquivo.
- Use-o quando
- Escolha um menu cujo gatilho e objeto cabem na tarefa. Depois, crie o comportamento dele no teclado.
- Não o use quando
- Nunca coloque campos de formulário ou a navegação principal do site dentro de um menu de comandos.
- Nome usado no código
DropdownMenu / ContextMenu
Selecionar
Um select abre uma lista fixa e deixa a pessoa escolher um valor.
Um campo de país mostra uma lista fixa e rejeita valores fora dela.
- Use-o quando
- Use-o quando a lista for fixa, não muito longa, e a página tiver pouco espaço.
- Não o use quando
- Nunca use para uma lista longa que as pessoas precisam buscar. Use uma combobox em vez disso.
- Nome usado no código
<select> / role="listbox"
Caixa de combinação editável
Uma caixa de combinação editável é um campo de texto junto a uma lista que filtra enquanto você digita.
Digite “Tai” para mostrar Taipei e Tainan. Depois use as setas para escolher.
- Use-o quando
- Use-o para listas longas pesquisáveis, autocompletar ou escolhas que permitam uma resposta personalizada.
- Não o use quando
- Nunca chame um menu simples ou um select nativo de combobox porque eles funcionam de forma diferente.
- Nome usado no código
role="combobox" + aria-controls
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| Menu Dropdown & Contextual — Pacote de AprendizadoDropdown & Context Menu — Learning Bundle | Escolha um menu cujo gatilho e objeto cabem na tarefa. Depois, crie o comportamento dele no teclado. | Nunca coloque campos de formulário ou a navegação principal do site dentro de um menu de comandos. | DropdownMenu / ContextMenu |
| SelecionarSelect | Use-o quando a lista for fixa, não muito longa, e a página tiver pouco espaço. | Nunca use para uma lista longa que as pessoas precisam buscar. Use uma combobox em vez disso. | <select> / role="listbox" |
| Caixa de combinação editávelEditable Combobox | Use-o para listas longas pesquisáveis, autocompletar ou escolhas que permitam uma resposta personalizada. | Nunca chame um menu simples ou um select nativo de combobox porque eles funcionam de forma diferente. | role="combobox" + aria-controls |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Menu Dropdown & Contextual — Pacote de Aprendizado (Dropdown & Context Menu — Learning Bundle), Selecionar (Select), Caixa de combinação editável (Editable Combobox) para o nosso fluxo real de usuário. Use esta regra: Um dropdown menu executa ações. Um select escolhe de uma lista fixa. Um combobox também deixa você digitar ou pesquisar. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.