RadioGroup

Grupo de radios para seleccionar una sola opción entre varias.

---

Import

import { RadioGroup, RadioGroupItem } from '@imansi/ui';

---

Uso básico

<RadioGroup defaultValue="opcion-1">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="opcion-1" id="opcion-1" />
    <Label htmlFor="opcion-1">Opción 1</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="opcion-2" id="opcion-2" />
    <Label htmlFor="opcion-2">Opción 2</Label>
  </div>
</RadioGroup>

---

Con label y hint

<RadioGroup defaultValue="mensual" className="space-y-3">
  <div className="flex items-start gap-3">
    <RadioGroupItem value="mensual" id="mensual" className="mt-1" />
    <div>
      <Label htmlFor="mensual">Plan mensual</Label>
      <p className="text-sm text-muted-foreground">$29/mes</p>
    </div>
  </div>
  <div className="flex items-start gap-3">
    <RadioGroupItem value="anual" id="anual" className="mt-1" />
    <div>
      <Label htmlFor="anual">Plan anual</Label>
      <p className="text-sm text-muted-foreground">$290/año · 2 meses gratis</p>
    </div>
  </div>
</RadioGroup>

---

Controlado

import { useState } from 'react';
import { RadioGroup, RadioGroupItem, Label } from '@imansi/ui';

export function SelectorPlan() {
  const [plan, setPlan] = useState('pro');

  return (
    <RadioGroup value={plan} onValueChange={setPlan}>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="free" id="free" />
        <Label htmlFor="free">Free</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="pro" id="pro" />
        <Label htmlFor="pro">Pro</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="team" id="team" />
        <Label htmlFor="team">Team</Label>
      </div>
    </RadioGroup>
  );
}

---

Horizontal

<RadioGroup defaultValue="a" className="flex gap-6">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="a" id="a" />
    <Label htmlFor="a">A</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="b" id="b" />
    <Label htmlFor="b">B</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="c" id="c" />
    <Label htmlFor="c">C</Label>
  </div>
</RadioGroup>

---

Props

RadioGroup

Prop	Tipo	Default	Descripción
value	string	—	Valor seleccionado (controlado)
defaultValue	string	—	Valor inicial
onValueChange	(value: string) => void	—	Callback al cambiar
disabled	boolean	false	Deshabilita todo el grupo
className	string	—	Clases adicionales

RadioGroupItem

Prop	Tipo	Default	Descripción
value	string	—	Valor de esta opción (obligatorio)
disabled	boolean	false	Deshabilita solo esta opción
className	string	—	Clases adicionales

---

Accesibilidad

• Navegable con Tab para entrar al grupo
• Flechas ↑↓ para moverse entre opciones
• Space para seleccionar
• role="radiogroup" + role="radio" aplicados automáticamente