Componentes
Radio
Uma entre poucas. Círculo da mesma família do FilterChip single. fieldset + legend em rótulo de máquina.
Exemplos#
Uma entre poucas, todas à vista
Importar#
import { RadioGroup, Radio } from "@hiboupay/react";
import type { RadioGroupProps, RadioProps } from "@hiboupay/react";Quando usar#
Use quando
- 2 a 5 opções exclusivas no formulário: método, prazo, tom.
- Quando todas as opções precisam aparecer ao mesmo tempo.
Não use quando
- Lista longa: Select ou FilterChip.
- Ligar/desligar: Switch.
- Duas vistas: Tabs.
Anatomia#
- 01fieldset com legend (hb-label)
- 02Círculo 16px
- 03Ponto branco interno quando ativo
- 04Rótulo Inter 14
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| RadioGroup.name* | string | name nativo compartilhado. | |
| RadioGroup.value | string | Controlado. | |
| RadioGroup.onValueChange | (value: string) => void | Nova escolha. | |
| RadioGroup.label | ReactNode | Legend visível. | |
| Radio.value* | string | Valor desta opção. | |
| Radio.children | ReactNode | Rótulo da opção. |
Acessibilidade#
Teclado
Leitor de tela
- —radiogroup nativo via fieldset. Cada Radio é input radio.
Boas práticas#
Faça
- Mostre 2–5. A opção padrão deve ser a mais segura, não a mais lucrativa.
Evite
- Radio para aceitar termo (Checkbox).
- Esconder opções atrás de "ver mais".
Conteúdo#
- —Rótulos paralelos: "PIX", "Boleto", "Cartão".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
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.
Entrada
Select
Campo nativo. Mesmo anel e a mesma altura do Input, com a seta Graffiti do campo. O menu aberto é o do sistema.
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.