Radio

Exclusive selections. Clear visual state. Prevent user errors.

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}

Installation

pnpm dlx nachui add radio

Anatomy

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

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

Variants

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}

With Label

Radio component alongside a label for context. The name attribute is used to group the options.

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}

Disabled

A disabled state stops interactions.

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}

API Reference

Radio

Prop	Type	Default	Description
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when checked state changes
`disabled`	`boolean`	-	Disables the radio
`name`	`string`	-	Name of the radio group

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousProgress

NextSelect