componentes / radio

Radio

RadioGroup renderiza um conjunto de opções a partir de um array; Radio é o radio nativo avulso.

Como usar

Use `RadioGroup` com um array `options` (como o `Select`): ele compartilha um `name`, funciona controlado (`value`) ou não (`defaultValue`) e as setas movem entre as opções nativamente. Use `Radio` sozinho quando precisar de controle total de cada linha.

preview

Plano

FreePara projetos pessoais

ProPara times pequenos

Team

Radio.tsx

import { RadioGroup } from "vaiperui";
 
<RadioGroup
  label="Plano"
  defaultValue="free"
  onValueChange={(plan) => console.log(plan)}
  options={[
    { value: "free", label: "Free", description: "Para projetos pessoais" },
    { value: "pro", label: "Pro", description: "Para times pequenos" },
    { value: "team", label: "Team", disabled: true },
  ]}
/>

Cores

cores.tsx

<RadioGroup variantColor="primary" options={options} defaultValue="free" />
<RadioGroup variantColor="success" options={options} defaultValue="free" />
<RadioGroup variantColor="warning" options={options} defaultValue="free" />
<RadioGroup variantColor="danger" options={options} defaultValue="free" />

Orientação

preview

FreePara projetos pessoais

ProPara times pequenos

vertical

FreePara projetos pessoais

ProPara times pequenos

horizontal

orientacao.tsx

<RadioGroup orientation="vertical" options={options} />
<RadioGroup orientation="horizontal" options={options} />

Tamanhos

tamanhos.tsx

<RadioGroup size="sm" options={options} />
<RadioGroup size="md" options={options} />
<RadioGroup size="lg" options={options} />

Estados

preview

FreePara projetos pessoais

ProPara times pequenos

Você pode mudar depois

ajuda

FreePara projetos pessoais

ProPara times pequenos

Escolha uma

erro

FreePara projetos pessoais

ProPara times pequenos

desabilitado

estados.tsx

<RadioGroup helperText="..." options={options} />
<RadioGroup errorMessage="..." options={options} />
<RadioGroup disabled options={options} />

Cor personalizada

preview

FreePara projetos pessoais

ProPara times pequenos

Laranja

Um radio avulso

Radio

cor-personalizada.tsx

<RadioGroup customColor="#ff6600" options={options} />
<Radio name="single" label="Um radio avulso" />

Props

Prop	Valores	Padrão	Descrição
options	{ value, label, description?, disabled? }[]	nenhum	As opções do RadioGroup
value / defaultValue	string	nenhum	Seleção controlada / não controlada
onValueChange	(value: string) => void	nenhum	Chamado com o valor selecionado
name	string	gerado	Nome compartilhado dos radios, para enviarem com um <form>
label	string	nenhum	Título do grupo (um <legend>)
orientation	vertical \| horizontal	vertical	Direção das opções
helperText / errorMessage	string	nenhum	Texto abaixo do grupo; um erro colore todos os radios
disabled	boolean	false	Desabilita todas as opções
variantColor	primary \| success \| warning \| danger	primary	Cor do estado marcado e do anel de foco
customColor	string \| { light, dark }	nenhum	Qualquer cor CSS (ou um par por tema). Substitui o variantColor
size	sm \| md \| lg	md	Tamanho do controle e do texto
animation	none \| smooth \| fast \| bounce	smooth	Transição ao alternar
Radio	InputHTMLAttributes<HTMLInputElement>	nenhum	Radio avulso: label, helperText, errorMessage, as props de estilo acima e todas as props nativas de input

Acessibilidade

`RadioGroup` renderiza um `<fieldset>` com `<legend>` (vindo de `label`) e um `role="radiogroup"` interno nomeado pelo mesmo `label`.
Cada opção é um `<input type="radio">` nativo com o mesmo `name`, então o navegador entrega a navegação por setas e uma única parada de Tab.
O `label` de cada opção dá o nome ao radio e a `description` vira o texto de `aria-describedby` dele.
`errorMessage` define `aria-invalid` no fieldset e em cada radio; o `aria-describedby` do fieldset aponta para o erro ou o texto de ajuda.
`disabled` no grupo desabilita o fieldset; uma opção também pode ser desabilitada individualmente.

Teclado

Tecla	Ação
Tab	Move o foco para dentro e para fora do grupo (uma parada, na opção selecionada).
Arrow keys	Vão para a opção seguinte ou anterior e a selecionam (comportamento nativo de radio).
Space	Seleciona a opção focada quando nenhuma está selecionada ainda.

Tenha em mente

Sempre passe `label` ao `RadioGroup`; sem ele o grupo não tem nome acessível.
Um `Radio` avulso não tem semântica de grupo: dê o mesmo `name` aos radios relacionados e envolva-os você mesmo.