AppRadio

Átomos

Abrir no Storybook

Botão de opção nativo com rótulo e mensagem de apoio opcional.

Quando usar: escolha exclusiva entre opções relacionadas, normalmente dentro de AppRadioGroup.

Quando não usar: múltiplas escolhas independentes (use AppCheckbox).

O ref e todas as props HTML são repassados ao <input> nativo.

Importar

import { AppRadio } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppRadio.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppRadio.css';

Exemplos

Default

Exemplo: AppRadio, Default

const Default = () => <AppRadio label="Mensal" name="plano" value="mensal" />;

Sizes

Exemplo: AppRadio, Sizes

const Sizes = () => (
  <div style={{ display: 'grid', gap: 16 }}>
    <AppRadio size="sm" label="Pequeno" name="tamanho" value="sm" />
    <AppRadio size="md" label="Médio" name="tamanho" value="md" defaultChecked />
  </div>
);

Disabled

Exemplo: AppRadio, Disabled

const Disabled = () => <AppRadio label="Mensal" name="plano" value="mensal" disabled defaultChecked />;

Props

Prop	Tipo	Padrão	Descrição
error	string	—	Mensagem de erro que marca o controle como inválido.
hint	string	—	Texto de apoio abaixo do rótulo. Some enquanto houver error.
label	ReactNode	—	Rótulo visível. Informe label ou aria-label para dar nome acessível ao controle.
size	"sm" | "md"	md	Tamanho do controle e da tipografia. Padrão: md.