Radio

Radios allow users to select exactly one option from a set of mutually exclusive choices. Built on top of Radix UI primitives for accessibility.

Basic Usage

import { Radio, RadioGroup } from '@/components'

<RadioGroup defaultValue="option1">
  <Radio value="option1" id="option1" />
  <label htmlFor="option1">Option 1</label>
  <Radio value="option2" id="option2" />
  <label htmlFor="option2">Option 2</label>
</RadioGroup>

Option 1

Option 2

Option 3

States

Radios support two states: unselected and selected.

Unselected

Selected

Unselected

<RadioGroup>
  <Radio value="option" />
</RadioGroup>

Selected

<RadioGroup value="option">
  <Radio value="option" />
</RadioGroup>

Disabled

Disabled radios cannot be interacted with and display a muted appearance.

Disabled states

Unselected

Selected

<RadioGroup>
  <Radio value="option" disabled />
</RadioGroup>

<RadioGroup value="option">
  <Radio value="option" disabled />
</RadioGroup>

Error Variant

Use the error variant to indicate validation errors or required fields.

Error states

Unselected

Selected

<RadioGroup>
  <Radio value="option" variant="error" />
</RadioGroup>

<RadioGroup value="option">
  <Radio value="option" variant="error" />
</RadioGroup>

Controlled

You can control the radio group state externally using the value and onValueChange props.

Option 1 (selected)

Option 2

Option 3

Selected value: option1

const [value, setValue] = useState('option1')

<RadioGroup value={value} onValueChange={setValue}>
  <Radio value="option1" />
  <Radio value="option2" />
  <Radio value="option3" />
</RadioGroup>

Horizontal Layout

Use a horizontal layout for inline radio groups.

Option 1

Option 2

Option 3

<RadioGroup orientation="horizontal" className="flex-row gap-6">
  <Radio value="option1" />
  <Radio value="option2" />
  <Radio value="option3" />
</RadioGroup>

All States Overview

Accessibility

Built on Radix UI Radio Group primitive for robust accessibility
Full keyboard support (Arrow keys to navigate, Space to select)
Proper ARIA attributes for screen readers
Supports aria-label and aria-labelledby for labeling
Focus states are clearly visible
Only one option can be selected at a time within a group

API Reference

RadioGroup Props

Prop	Type	Default	Description
value	`string`	-	The controlled selected value
defaultValue	`string`	-	The default selected value (uncontrolled)
onValueChange	`(value: string) => void`	-	Callback when selection changes
disabled	`boolean`	`false`	Disable all radios in the group
orientation	`"horizontal" \| "vertical"`	`"vertical"`	Layout orientation
name	`string`	-	Name for form submission
className	`string`	-	Additional CSS classes

Radio Props

Prop	Type	Default	Description
value	`string`	Required	The value of this radio option
disabled	`boolean`	`false`	Whether the radio is disabled
variant	`"default" \| "error"`	`"default"`	Visual variant
className	`string`	-	Additional CSS classes