The Radio component provides radio buttons for selecting a single option from a group.
Installation
import { RadioGroup, Radio } from "@craftdotui/baseui/components/radio";
<RadioGroup>
<div className="flex items-center gap-2">
<Radio value="option1" />
<label>Option 1</label>
</div>
<div className="flex items-center gap-2">
<Radio value="option2" />
<label>Option 2</label>
</div>
<div className="flex items-center gap-2">
<Radio value="option3" />
<label>Option 3</label>
</div>
</RadioGroup>
Components
RadioGroup
Controlled selected value.
Callback when selection changes.
Name for form submission.
Disable all radio buttons.
Value of this radio option.
Disable this radio button.
The Radio component automatically includes a RadioIndicator that shows a dot when selected.
Examples
Basic Radio Group
<RadioGroup defaultValue="option1">
<div className="flex items-center gap-2">
<Radio id="opt1" value="option1" />
<label htmlFor="opt1">Option 1</label>
</div>
<div className="flex items-center gap-2">
<Radio id="opt2" value="option2" />
<label htmlFor="opt2">Option 2</label>
</div>
</RadioGroup>
Controlled Radio Group
const [value, setValue] = useState('option1');
<RadioGroup value={value} onValueChange={setValue}>
<div className="flex items-center gap-2">
<Radio value="option1" />
<label>Option 1</label>
</div>
<div className="flex items-center gap-2">
<Radio value="option2" />
<label>Option 2</label>
</div>
</RadioGroup>
Disabled Options
<RadioGroup>
<div className="flex items-center gap-2">
<Radio value="option1" />
<label>Enabled</label>
</div>
<div className="flex items-center gap-2">
<Radio value="option2" disabled />
<label>Disabled</label>
</div>
</RadioGroup>
Accessibility
- Built on @base-ui/react for ARIA support
- Keyboard navigation (Arrow keys to move between options)
- Proper radio role and attributes
- Focus visible ring
- Works with label elements via htmlFor
- Group-level and item-level disabled states