dropdown · Casa Hacker DS

overview

01

variantes

02

Variante única.

comportamentos

03

Click no trigger abre/fecha o menu
↓ / ↑ navegam as opções
Enter / Space seleciona a opção focada
Esc fecha sem selecionar
Click fora fecha
Disparou evento custom chds:change com {value, label}

modifiers · api

04

prop	tipo	default	descrição
.dropdown	class	—	container
.dropdown-trigger	class	—	botão clicável
.dropdown-menu	class	—	lista de opções
.dropdown-item	class	—	opção
.selected	class	—	item selecionado
data-value	attr	—	valor enviado no evento

quando usar

05

use

5-15 opções
Necessidade de busca/filtro futuro
Opções com labels longos

não use

1-4 opções — usa radio button
20+ opções — usa search/combobox
Opções mutuamente complementares — usa checkbox

acessibilidade

06 · wcag aa

role="listbox" no menu
role="option" nas opções
aria-haspopup="listbox" e aria-expanded no trigger
Foco mantido visível na opção atual
Funciona via teclado totalmente

código

07 · html

<div class="dropdown">
  <button class="dropdown-trigger" type="button">
    label <span class="chevron">▼</span>
  </button>
  <div class="dropdown-menu">
    <div class="dropdown-item" data-value="1">opção 1</div>
    <div class="dropdown-item" data-value="2">opção 2</div>
  </div>
</div>