No componente dropdown o usuário deve selecionar uma opção em uma lista.

Quando usar

Pode ser usado como um campo de formulário em que as opções são limitadas (por exemplo, profissão) ou para filtrar ou ordenar dados de um conteúdo.

Anatomia

• Título: Indica o que o usuário deve encontrar na lista.
• Campo: mostra a opção selecionada. Essa parte do componente é mostrada com a lista aberta ou fechada.
• Ícone: normalmente uma seta, indica se o campo está aberto ou fechado.
• Opções: lista de itens entre as quais o usuário deve escolher uma opção. A opção selecionada deve estar claramente marcada.

Para usar este componente em seu leiaute, acesse o banco de recursos e veja as versões já disponíveis para aplicação.

Comportamento

• Estados: o dropdown possui dois estados, aberto ou fechado. Quando fechado, ele mostra a opção atualmente selecionada ou um texto de ação (“selecione”). Quando aberto, mostra as opções disponíveis, com uma barra de rolagem quando necessário.
• Interações: o usuário pode abrir o dropdown clicando em qualquer local do componente. Caso o usuário deseje, pode digitar as primeiras letras do item que procura e a lista de itens irá se posicionar na opção mais próxima do que foi digitado. Ao selecionar um item, o menu de opções some e o item selecionado é apresentado dentro do campo.