Forms · Application UI
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.
Feature showcase
Installation
Features
6 examples
Default, Disabled, Form Validation, Horizontal, With Description, With Icon.
API
Props
| 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. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/radio-group.tsx |
| Default example | content/examples/radio-group/default.tsx |
| Disabled example | content/examples/radio-group/disabled.tsx |
| Form Validation example | content/examples/radio-group/form-validation.tsx |
| Horizontal example | content/examples/radio-group/horizontal.tsx |
| With Description example | content/examples/radio-group/with-description.tsx |
| With Icon example | content/examples/radio-group/with-icon.tsx |