P5 · Padrões
Filter Bar
Barra de filtros multi-grupo com semântica de seleção única (radio) ou múltipla (checkbox). Estado refletido na URL para compartilhamento.
Grupos de filtros
| Tipo | ARIA | Exemplo |
|---|---|---|
| Múltipla seleção | role='checkbox' | Severidade, região. |
| Seleção única | role='radio' | Status (todos/ativos/encerrados). |
| Range | role='slider' | Período (data início/fim). |
Comportamento
- Botão 'Limpar tudo' aparece quando qualquer filtro está ativo.
- Estado refletido em URL params (
?status=active&sev=high). - Aplicação imediata: sem botão 'Aplicar' (filtros são reativos).
- Em mobile, agrupe num drawer aberto por botão 'Filtros (3)'.
Anatomia visual
Pílulas em linha. Filtro ativo: fundo --brand-ink, texto branco. Filtro inativo: borda --n-fog, texto --fg-2.
<div role="group" aria-label="Severidade"> <span class="filter-label">Severidade</span> <button role="checkbox" aria-checked="true" class="filter-pill active">Critical</button> <button role="checkbox" aria-checked="false" class="filter-pill">High</button> </div>