Radio Group
A radio group component built on Base UI primitives that renders a group of mutually exclusive radio buttons in a vertical grid layout.
Default
Billing cycle
Selected: monthly
Disabled
Entire group disabled
Single item disabled
Form Validation
Horizontal
Size
Color
Selected: slate
With Description
Choose a plan
With Icon
Preview on
Previewing: desktop
Installation
npx shadcn@latest add @byronwade/radio-groupProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Value | — | The controlled value of the currently selected radio item. |
| defaultValue | Value | — | The uncontrolled default selected value on initial render. |
| onValueChange | (value: Value, eventDetails: RadioGroup.ChangeEventDetails) => void | — | Callback fired when the selected value changes. |
| disabled | boolean | false | Whether the component should ignore user interaction. |
| readOnly | boolean | false | Whether the user should be unable to select a different radio button in the group. |
| required | boolean | false | Whether the user must choose a value before submitting a form. |
| name | string | — | Identifies the field when a form is submitted. |
| className | string | — | Additional CSS class names to apply to the group container. |