Radio Group
A set of checkable buttons — known as radio buttons — where only one button can be checked at a time.
Installation
pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/radio-group.jsonBasic Radio Group
Simple radio groups with default, disabled, and individual disabled item states.
Radio Group with Descriptions
Radio options with additional descriptive text.
Unprocessed measurements as recorded by sensors
Average values calculated for each hour
Average values calculated for each day
Average values calculated for each week
Controlled Radio Group
Radio group with controlled state and value display.
Horizontal Layout
Radio groups displayed in a horizontal row.
Card Style Radio Group
Radio options styled as cards for better visual hierarchy.
Form Examples
Real-world form scenarios using radio groups.
Data Query Form
Alert Settings
Grid Layout
Radio groups displayed in a grid for better space utilization.
Props
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | The default selected value |
value | string | — | Controlled selected value |
onValueChange | (value: string) => void | — | Callback when value changes |
disabled | boolean | false | Disables the entire group |
className | string | — | Additional CSS classes |
RadioGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The value of the radio item |
disabled | boolean | false | Disables this specific item |
id | string | — | HTML id for label association |
className | string | — | Additional CSS classes |