Componentes
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.
betaEntradadesde 0.2.0@hiboupay/react
Exemplos#
Trilho 44×24, raio 8 · apagado com anel Graffiti, aceso em Vivid Blue
Importar#
tsx
import { Switch } from "@hiboupay/react";
import type { SwitchProps } from "@hiboupay/react";Quando usar#
Use quando
- Preferência persistente: aviso por e-mail, modo compacto.
- Um bit. O efeito é imediato.
Não use quando
- Escolher entre A e B: Radio.
- Filtrar lista: FilterChip.
- Ação com efeito irreversível: ConfirmGate.
Anatomia#
- 01Trilho 44×24, raio 8
- 02Thumb 16 de papel, raio 5
- 03kicker mono opcional
- 04Rótulo Inter 14
Estados#
offonfocus-visibledisabled
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| checked | boolean | Controlado. | |
| onCheckedChange | (checked: boolean) => void | Novo valor. | |
| label | ReactNode | O que muda quando liga. | |
| kicker | string | Rótulo de máquina acima do texto. | |
| disabled | boolean | false | Não muda. |
Acessibilidade#
Teclado
TabFoca.
EspaçoEnterLiga ou desliga.
Leitor de tela
- —role=switch com aria-checked. label associado por id.
Boas práticas#
Faça
- Rótulo descreve o estado ligado: "Receber aviso de liquidação".
Evite
- Switch que pede confirmação depois. Se precisa de gate, é botão + ConfirmGate.
Conteúdo#
- —Afirmação, não pergunta. Sem "Ativar…" genérico.
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.