Componentes
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.
Exemplos#
A mesma marca do filtro · independente, lote e traço
Importar#
import { Checkbox } from "@hiboupay/react";
import type { CheckboxProps } from "@hiboupay/react";Quando usar#
Use quando
- Aceitar um termo no formulário.
- Marcar linhas ou filhos de um grupo.
- Preferência que não é ligar/desligar um sistema (isso é Switch).
Não use quando
- Uma entre poucas opções exclusivas: Radio.
- Ligar uma configuração: Switch.
- Filtrar lista: FilterChip.
Anatomia#
- 01Caixa 16px, raio 5
- 02Check branco ou traço (indeterminate)
- 03Rótulo Inter 14 à direita
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | ReactNode | Texto clicável à direita da marca. | |
| indeterminate | boolean | false | Traço. Use quando alguns filhos estão marcados. |
| checked | boolean | Controlado. | |
| onChange | ChangeEventHandler | Nativo. Para controlado, leia e.target.checked. |
Acessibilidade#
Teclado
Leitor de tela
- —input checkbox nativo. Rótulo associado por id.
- —indeterminate é anunciado pelo sistema.
Boas práticas#
Faça
- Rótulo que afirma o que fica marcado: "Enviar comprovante por e-mail".
Evite
- Checkbox sozinho sem rótulo visível.
- Usar para on/off de produto (Switch).
Conteúdo#
- —Frase curta, sem ponto. Evite "Clique aqui".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Entrada
Radio
Uma entre poucas. Círculo da mesma família do FilterChip single. fieldset + legend em rótulo de máquina.
Entrada
Switch
Liga ou desliga uma configuração. Trilho com raio da escala: apagado em papel com anel Graffiti, aceso em Vivid Blue com luz interna. Thumb de papel.
Entrada
FilterChip
Chip de filtro: rótulo + valor, popover de vidro. Ativo vira papel com anel azul e ganha X para limpar.