Radio

Selecciones exclusivas. Estado visual claro. Prevenir errores.

default.tsx

1'use client';
2
3import { Radio } from '@/components/ui/radio';
4
5const radios = [
6  { label: 'Default radio', defaultChecked: false },
7  { label: 'Selected default radio', defaultChecked: true },
8] as const;
9
10export function Default() {
11  return (
12    <div className="flex gap-4">
13      {radios.map(({ label, defaultChecked }) => (
14        <Radio key={label} aria-label={label} name="default" defaultChecked={defaultChecked} />
15      ))}
16    </div>
17  );
18}

Instalación

pnpm dlx nachui add radio

Anatomía

1import { Radio } from '@/components/ui/radio';

1<Radio id="option-one" name="radio-group" />

Variantes

Predeterminado (Default)

default.tsx

1'use client';
2
3import { Radio } from '@/components/ui/radio';
4
5const radios = [
6  { label: 'Default radio', defaultChecked: false },
7  { label: 'Selected default radio', defaultChecked: true },
8] as const;
9
10export function Default() {
11  return (
12    <div className="flex gap-4">
13      {radios.map(({ label, defaultChecked }) => (
14        <Radio key={label} aria-label={label} name="default" defaultChecked={defaultChecked} />
15      ))}
16    </div>
17  );
18}

Con Etiqueta (With Label)

Acompañado de una etiqueta (Label) para proveer contexto extra. El atributo name se usa para agrupar las opciones de radio.

Option One

Option Two

with-label.tsx

1'use client';
2
3import { Label } from '@/components/ui/label';
4import { Radio } from '@/components/ui/radio';
5
6const options = [
7  { id: 'option-one', label: 'Option One', defaultChecked: true },
8  { id: 'option-two', label: 'Option Two' },
9];
10
11export function WithLabel() {
12  return (
13    <div className="flex flex-col gap-3">
14      {options.map((option) => (
15        <div key={option.id} className="flex items-center gap-2">
16          <Radio id={option.id} name="radio-group" defaultChecked={option.defaultChecked} />
17          <Label htmlFor={option.id}>{option.label}</Label>
18        </div>
19      ))}
20    </div>
21  );
22}

Deshabilitado (Disabled)

Estado en el que el usuario no puede interactuar con él.

Disabled option

Disabled selected option

disabled.tsx

1'use client';
2
3import { Label } from '@/components/ui/label';
4import { Radio } from '@/components/ui/radio';
5
6const options = [
7  { id: 'disabled-option', label: 'Disabled option', defaultChecked: false },
8  { id: 'disabled-checked', label: 'Disabled selected option', defaultChecked: true },
9] as const;
10
11export function Disabled() {
12  return (
13    <div className="flex flex-col gap-3">
14      {options.map(({ id, label, defaultChecked }) => (
15        <div key={id} className="flex items-center gap-2">
16          <Radio id={id} disabled name="disabled-group" defaultChecked={defaultChecked} />
17          <Label htmlFor={id} className="opacity-50">
18            {label}
19          </Label>
20        </div>
21      ))}
22    </div>
23  );
24}

Referencia de API

Radio

Prop	Tipo	Por defecto	Descripción
`onCheckedChange`	`(checked: boolean) => void`	-	Handler cuando el estado cambia
`disabled`	`boolean`	-	Evita interacción y reduce opacidad
`name`	`string`	-	Nombre del grupo de opciones

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorProgress

SiguienteSelect