componentes / radio

Radio

RadioGroup renderiza un conjunto de opciones desde un array; Radio es el radio nativo suelto.

Cómo usar

Usa `RadioGroup` con un array `options` (como `Select`): comparte un `name`, funciona controlado (`value`) o no (`defaultValue`) y las flechas se mueven entre opciones de forma nativa. Usa `Radio` solo cuando necesites control total de cada fila.

preview

Plan

FreePara proyectos personales

ProPara equipos pequeños

Team

Radio.tsx

import { RadioGroup } from "vaiperui";
 
<RadioGroup
  label="Plan"
  defaultValue="free"
  onValueChange={(plan) => console.log(plan)}
  options={[
    { value: "free", label: "Free", description: "Para proyectos personales" },
    { value: "pro", label: "Pro", description: "Para equipos pequeños" },
    { value: "team", label: "Team", disabled: true },
  ]}
/>

Colores

preview

FreePara proyectos personales

ProPara equipos pequeños

primary

FreePara proyectos personales

ProPara equipos pequeños

success

FreePara proyectos personales

ProPara equipos pequeños

warning

FreePara proyectos personales

ProPara equipos pequeños

danger

colores.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" />

Orientación

preview

FreePara proyectos personales

ProPara equipos pequeños

vertical

FreePara proyectos personales

ProPara equipos pequeños

horizontal

orientacion.tsx

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

Tamaños

tamanos.tsx

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

Estados

preview

FreePara proyectos personales

ProPara equipos pequeños

Puedes cambiarlo después

ayuda

FreePara proyectos personales

ProPara equipos pequeños

Elige una

error

FreePara proyectos personales

ProPara equipos pequeños

deshabilitado

estados.tsx

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

Color personalizado

preview

FreePara proyectos personales

ProPara equipos pequeños

Naranja

Un radio suelto

Radio

color-personalizado.tsx

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

Props

Prop	Valores	Predeterminado	Descripción
options	{ value, label, description?, disabled? }[]	ninguno	Las opciones del RadioGroup
value / defaultValue	string	ninguno	Selección controlada / no controlada
onValueChange	(value: string) => void	ninguno	Se llama con el valor seleccionado
name	string	generado	Nombre compartido de los radios, para enviarse con un <form>
label	string	ninguno	Título del grupo (un <legend>)
orientation	vertical \| horizontal	vertical	Dirección de las opciones
helperText / errorMessage	string	ninguno	Texto bajo el grupo; un error colorea todos los radios
disabled	boolean	false	Deshabilita todas las opciones
variantColor	primary \| success \| warning \| danger	primary	Color del estado marcado y del anillo de foco
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema). Reemplaza a variantColor
size	sm \| md \| lg	md	Tamaño del control y del texto
animation	none \| smooth \| fast \| bounce	smooth	Transición al alternar
Radio	InputHTMLAttributes<HTMLInputElement>	ninguno	Radio suelto: label, helperText, errorMessage, las props de estilo anteriores y todas las props nativas de input

Accesibilidad

`RadioGroup` renderiza un `<fieldset>` con `<legend>` (de `label`) y un `role="radiogroup"` interno nombrado con el mismo `label`.
Cada opción es un `<input type="radio">` nativo con el mismo `name`, así que el navegador aporta la navegación con flechas y una única parada de Tab.
El `label` de cada opción nombra a su radio y su `description` pasa a ser el texto de `aria-describedby`.
`errorMessage` define `aria-invalid` en el fieldset y en cada radio; el `aria-describedby` del fieldset apunta al error o al texto de ayuda.
`disabled` en el grupo deshabilita el fieldset; una opción también puede deshabilitarse por separado.

Teclado

Tecla	Acción
Tab	Mueve el foco hacia dentro y fuera del grupo (una parada, en la opción seleccionada).
Arrow keys	Van a la opción siguiente o anterior y la seleccionan (comportamiento nativo de radio).
Space	Selecciona la opción enfocada cuando aún no hay ninguna seleccionada.

Ten en cuenta

Pasa siempre `label` a `RadioGroup`; sin él el grupo no tiene nombre accesible.
Un `Radio` suelto no tiene semántica de grupo: dale el mismo `name` a los radios relacionados y envuélvelos tú.