Radio

Un control que permite al usuario seleccionar una opción entre varias posibilidades mutuamente exclusivas.

default.tsx

1'use client';
2
3import { Radio } from '@/components/ui/radio';
4
5export function Default() {
6  return (
7    <div className="flex gap-4">
8      <Radio aria-label="Default radio" name="default" />
9      <Radio aria-label="Selected default radio" name="default" defaultChecked />
10    </div>
11  );
12}

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
5export function Default() {
6  return (
7    <div className="flex gap-4">
8      <Radio aria-label="Default radio" name="default" />
9      <Radio aria-label="Selected default radio" name="default" defaultChecked />
10    </div>
11  );
12}

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
6export function WithLabel() {
7  return (
8    <div className="flex flex-col gap-3">
9      <div className="flex items-center gap-2">
10        <Radio id="option-one" name="radio-group" defaultChecked />
11        <Label htmlFor="option-one">Option One</Label>
12      </div>
13      <div className="flex items-center gap-2">
14        <Radio id="option-two" name="radio-group" />
15        <Label htmlFor="option-two">Option Two</Label>
16      </div>
17    </div>
18  );
19}

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
6export function Disabled() {
7  return (
8    <div className="flex flex-col gap-3">
9      <div className="flex items-center gap-2">
10        <Radio id="disabled-option" disabled name="disabled-group" />
11        <Label htmlFor="disabled-option" className="opacity-50">
12          Disabled option
13        </Label>
14      </div>
15      <div className="flex items-center gap-2">
16        <Radio id="disabled-checked" disabled defaultChecked name="disabled-group" />
17        <Label htmlFor="disabled-checked" className="opacity-50">
18          Disabled selected option
19        </Label>
20      </div>
21    </div>
22  );
23}

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

AnteriorProgress SiguienteSelect