Skip to main content

Dropdown

Visão geral#

O componente dropdown é o conjunto de um botão acionador com o componente listbox. É indicado para listar ações possíveis.

Componentes relacionados

Anatomia#

O dropdown é composto por border, icon e label. Também contém partes que são específicas de estados de interação, como background no estado hover / pressed e outline no estado focused.

Dropdown fechado e aberto com as 6 partes sinalizadas. Fechado: border, label e icon. Aberto: background, outline e listbox

1. Border

2. Label

3. Icon

4. Background (hover/pressed)

5. Outline (focused)

6. Listbox

O componente é estruturado e estilizado por meio dos design tokens. Os tokens que podem ser alterados pelas marcas estão listados na seção de propriedades customizáveis.

Comportamento#

Abertura da lista#

  • O posicionamento do componente listbox pode variar quando o componente está localizado em uma área da tela que impede a apresentação da lista. Por padrão abertura é alinhado à esquerda inferior, mas pode ter a variação de direita inferior, esquerda e direita superior.
Dropdown com lista de opções aberta na parte inferior, alinhada à esquerda do botão de acionamento

Acessibilidade tratada no componente#

Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas: