Radio Group

A set of mutually exclusive options. Built on Radix primitives with keyboard navigation and focus management.

Basic

Small

Medium

Large

<RadioGroup defaultValue="medium">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="small" id="small" />
    <Label htmlFor="small">Small</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="medium" id="medium" />
    <Label htmlFor="medium">Medium</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="large" id="large" />
    <Label htmlFor="large">Large</Label>
  </div>
</RadioGroup>

API Reference

Prop	Type	Default	Description
`value`	`string`	—	The controlled value of the selected radio item.
`onValueChange`	`(value: string) => void`	—	Callback fired when the selected value changes.
`defaultValue`	`string`	—	The default value when uncontrolled.
`disabled`	`boolean`	`false`	When true, disables all radio items in the group.