PrimitiveDisponible

Radio Group

Selección mutuamente excluyente controlada mediante flechas.

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/radio-group.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { RadioGroup, RadioGroupItem, RadioCard } from '@/components/ui/radio-group';
import { Label } from '@/components/ui/label';

export default function Demo() {
  return (
    <div className="grid gap-6"><fieldset className="grid gap-4">
      <legend className="mb-4 bl-type-label">Notification frequency</legend>
      <RadioGroup defaultValue="daily" aria-label="Notification frequency">
        {['Daily', 'Weekly', 'Never'].map((label) => (
          <div key={label} className="flex items-center gap-3">
            <RadioGroupItem
              id={`frequency-${label}`}
              value={label.toLowerCase()}
            />
            <Label htmlFor={`frequency-${label}`}>{label}</Label>
          </div>
        ))}
      </RadioGroup>
    </fieldset>
    <fieldset className="grid gap-4">
      <legend className="mb-4 bl-type-label">Practice difficulty</legend>
      <RadioGroup defaultValue="easy" aria-label="Practice difficulty" className="grid grid-cols-3 gap-3">
        <RadioCard value="easy" aria-label="Easy"><strong>Easy</strong><span>Start with guidance</span></RadioCard>
        <RadioCard value="intermediate" aria-label="Intermediate"><strong>Intermediate</strong><span>Practice at your pace</span></RadioCard>
        <RadioCard value="hard" aria-label="Hard"><strong>Hard</strong><span>Try a challenge</span></RadioCard>
      </RadioGroup>
    </fieldset></div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Documenta el valor inicial, seleccionado, deshabilitado y foco. La selección cambia el indicador o la posición, además del color.
Usa Espacio para activar botones de selección; las flechas cambian radios y sliders. Checkbox admite un estado mixto.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
value	string	uncontrolled	Selected item.
onValueChange	function	—	Reports a selection change.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.