Skip to main content

Radio

A control that allows the user to select one of a few mutually exclusive options.

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}

Installation

pnpm dlx mateui add radio

Anatomy

1import { Radio } from '@/components/ui/radio';
1<Radio id="option-one" name="radio-group" />

Variants

Default

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}

With Label

Radio component alongside a label for context. The name attribute is used to group the options.
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}

Disabled

A disabled state stops interactions.
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}

API Reference

Radio

PropTypeDefaultDescription
onCheckedChange(checked: boolean) => void-Callback when checked state changes
disabledboolean-Disables the radio
namestring-Name of the radio group
PreviousProgressNextSelect