Pular para o conte√ļdo principal

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:

  • Usar medidas relativas para possibilitar um zoom de at√© 200%, sem perda do conte√ļdo ou funcionalidade.(WCAG 1.4.4: Resize Text)
  • Permitir a intera√ß√£o via teclado, atrav√©s das teclas: Tab, Esc e setas. (WCAG 2.1.1: Keyboard)
  • A ordem de foco deve acontecer em sequ√™ncia l√≥gica. (WCAG 2.4.3: Focus Order)
  • √Āreas de clique ou toque para elementos interativos devem ter pelo menos 44x44 pixels. (WGAG 2.5.8: Target Size (Minimum))
  • Utilizar nome, fun√ß√£o e valor adequadamente, pois estes par√Ęmetros s√£o utilizados por tecnologias assistivas para identificar os elementos da interface. (WCAG 4.1.2: Name, Role, Value)