Componentes
FilterChip
Chip de filtro: rótulo + valor, popover de vidro. Ativo vira papel com anel azul e ganha X para limpar.
Exemplos#
Chip ativo vira papel com anel azul · popover de vidro
Importar#
import { FilterChip } from "@hiboupay/react";
import type { FilterChipProps, ChipOption } from "@hiboupay/react";Quando usar#
Use quando
- Barra de filtros sobre lista ou quadro.
- Seleção múltipla (padrão) ou única (single).
Não use quando
- Campo de formulário: Select.
- Alternar vista: Tabs.
Anatomia#
- 01Gatilho: rótulo, valor resumido, seta
- 02Botão limpar (quando ativo)
- 03Popover de vidro com lente
- 04Busca opcional
- 05Opções com caixa ou rádio, ponto de acento e dica mono
- 06Limpar seleção
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label* | string | Dimensão filtrada. | |
| options* | ChipOption[] | { value, label, hint?, accent? }. | |
| value* | string[] | Valores selecionados. | |
| onChange* | (next: string[]) => void | Nova seleção. | |
| single | boolean | false | Uma opção por vez (rádio). |
| searchable | boolean | false | Busca no topo do popover. |
| renderOption | (option, selected) => ReactNode | Conteúdo customizado da opção. | |
| emptyLabel | string | "Nada encontrado" | Texto quando a busca não acha. |
| clearLabel | string | "Limpar seleção" | Rótulo do limpar no rodapé. |
Acessibilidade#
Teclado
Leitor de tela
- —Grupo de opções. Múltipla: role=checkbox com aria-checked. Única: role=radio com aria-checked.
- —Limpar tem aria-label "Limpar {label}".
Boas práticas#
Faça
- Uma dimensão por chip.
- searchable acima de 8 opções.
Evite
- Cor de estado no chip.
- Chip que some quando não há resultado.
Conteúdo#
- —Rótulo substantivo singular: "Status", "Período".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Entrada
Tabs
Segmento: trilho rebaixado com um papel que desliza até a aba ativa. Linha: sublinhado azul para conteúdo longo. Base Radix.
Estado
EmptyState
Vazio: a coruja vigia até ter o que mostrar. Sem ilustração genérica. Sempre que puder, um próximo passo. É o StatusView no tom neutro.
Entrada
Checkbox
A mesma marca do FilterChip: papel com anel fino, azul preenchido com check branco. Independente ou em lote. Traço quando só alguns filhos estão marcados.
Diálogo
DropdownMenu
Menu de vidro no desktop; folha de papel no celular. Item 34 (40 no toque), perigo em tinta rosa. Nunca é navegação e nunca é filtro.