AppRadioGroup

Moléculas

Grupo de escolha exclusiva que renderiza radios nativos a partir de uma lista de opções.

Quando usar: uma opção deve ser escolhida entre alternativas relacionadas.

Quando não usar: múltiplas escolhas independentes (use AppCheckboxGroup) ou um radio isolado (use AppRadio).

A API usa options em vez de filhos para garantir que todos os radios compartilhem name, seleção e teclado nativos.

Importar

import { AppRadioGroup } 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/AppRadioGroup.css';

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

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

Exemplos

Default

const Default = () => <ControlledGroup
    legend="Plano"
    options={[
      { value: 'mensal', label: 'Mensal' },
      { value: 'anual', label: 'Anual', hint: 'Economize no pagamento anual.' },
      { value: 'vitalicio', label: 'Vitalício' },
    ]} />;

With Error

const WithError = () => <AppRadioGroup
    legend="Plano"
    options={[
      { value: 'mensal', label: 'Mensal' },
      { value: 'anual', label: 'Anual', hint: 'Economize no pagamento anual.' },
      { value: 'vitalicio', label: 'Vitalício' },
    ]}
    error="Escolha um plano para continuar." />;

Horizontal

const Horizontal = () => <AppRadioGroup
    legend="Plano"
    options={[
      { value: 'mensal', label: 'Mensal' },
      { value: 'anual', label: 'Anual', hint: 'Economize no pagamento anual.' },
      { value: 'vitalicio', label: 'Vitalício' },
    ]}
    orientation="horizontal"
    defaultValue="anual" />;

Props

Prop	Tipo	Padrão	Descrição
`legend`*	`ReactNode`	`—`	Legenda visível que dá nome acessível ao grupo.
`options`*	`AppRadioOption[]`	`—`	Opções renderizadas como `AppRadio`.
`defaultValue`	`string`	`—`	Valor inicialmente selecionado no modo não controlado.
`error`	`string`	`—`	Mensagem de erro que marca o grupo como inválido.
`hint`	`string`	`—`	Texto de apoio abaixo das opções. Some enquanto houver `error`.
`name`	`string`	`—`	Nome comum dos radios. Quando omitido, um nome estável é gerado.
`onChange`	`((value: string) => void)`	`—`	Recebe o valor da opção selecionada.
`orientation`	`"horizontal" \| "vertical"`	`vertical`	Disposição das opções. Padrão: `vertical`.
`value`	`string`	`—`	Valor selecionado no modo controlado.