Radio Group
FormsA set of radio buttons for selecting a single option from a list. Use radio groups when users must choose exactly one option.
Import
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";Usage
Basic Radio Group
Standard radio button group
Product Selection
Real-world example with product categories
Disabled State
Radio group with disabled options
API Reference
value—stringThe controlled value of the selected radio
defaultValue—stringThe default selected value (uncontrolled)
onValueChange—(value: string) => voidHandler called when selection changes
disabledfalsebooleanWhether the entire group is disabled
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The controlled value of the selected radio |
defaultValue | string | — | The default selected value (uncontrolled) |
onValueChange | (value: string) => void | — | Handler called when selection changes |
disabled | boolean | false | Whether the entire group is disabled |