Radio Group
Radio group with dot notation, orientation support, and controlled/uncontrolled selection.
Preview
Installation
npx drivn add radio-groupUsage
1 import { RadioGroup } from "@/components/ui/radio-group" 2 3 export default function Page() { 4 return ( 5 <RadioGroup defaultValue="email"> 6 <RadioGroup.Item value="email" label="Email" /> 7 <RadioGroup.Item value="sms" label="SMS" /> 8 <RadioGroup.Item value="push" label="Push" /> 9 </RadioGroup> 10 ) 11 }
Horizontal
Use orientation for inline radio options.
Square
Rounded square variant for a softer checkbox-like appearance.
With Description
Add secondary text below each label for richer option cards.
Disabled
Disable individual items or the entire group.
API Reference
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | Initial selected value (uncontrolled) |
value | string | — | Selected value (controlled) |
onValueChange | (value: string) => void | — | Callback fired when the selected value changes |
orientation | "vertical" | "horizontal" | "vertical" | Layout direction of the radio items |
variant | "circle" | "square" | "circle" | Visual style of the radio indicator |
disabled | boolean | false | Disables all radio items in the group |
className | string | — | Additional CSS classes for the root element |
RadioGroup.Item
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Unique value for this radio option |
label | string | — | Text label displayed next to the radio |
description | string | — | Secondary text displayed below the label |
children | ReactNode | — | Custom content (overrides label) |
disabled | boolean | false | Disables this specific radio item |
className | string | — | Additional CSS classes for the item wrapper |
...props | InputHTMLAttributes<HTMLInputElement> | — | All standard HTML input attributes are supported |