Radio Group
A radio button group component where only one option can be selected at a time. Built on Radix UI primitives with customizable sizing and labels. Perfect for single-choice selections in forms.
Installation
Import
Usage
Use RadioGroup for single-choice selection from multiple options. All options in a group share the same name and only one can be selected. Use controlled value for form integration. For form integration with validation and error handling, use RadioField which extends RadioGroup and integrates with Conform forms.
Design Guidelines
Maintain consistent radio button sizing throughout your application. Use appropriate sizes for your form layout. Group related options visually. Provide clear labels that describe the choice. Use RadioField for forms to get automatic validation and error handling.
Basic Usage
Simple radio group with options
Plan Selection Form
Subscription plan selection with pricing information
Radio Sizes
Demonstrating different radio button sizes in a form
Checkout Form
Complete checkout form with payment method and shipping selection
RadioField with Validation
RadioField automatically displays validation errors from form schema
RadioGroup
Container component for radio button groups This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled selected value |
defaultValue | string | — | Default selected value |
onValueChange | (value: string) => void | — | Callback fired when selection changes |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
RadioGroupItem
Individual radio button option within a RadioGroup This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | The value of the radio button |
label | React.ReactNode | — | Label text or element for the radio button |
radioSize | "sm" | "md" | "lg" | "xl" | "md" | Size of the radio button |
labelProps | LabelProps | — | Props to pass to the Label component |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
RadioField
RadioField extends RadioGroup with form integration, labels, error handling, and validation support. Use RadioField when building forms with Conform. extends RadioGroup. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
field | FieldMetadata | — | Conform field metadata for form integration and validation |
label | string | React.ReactNode | — | Label text displayed above the radio group |
options | Array<{ value: string; label: string | React.ReactNode; id?: string }> | — | Array of radio button options |
radioSize | "sm" | "md" | "lg" | — | Size of the radio buttons |
onChange | (value: string) => void | — | Callback fired when selection changes |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
Accessibility
Accessibility features and considerations
RadioGroup includes proper ARIA attributes and keyboard navigation. Radio buttons are keyboard accessible with arrow keys. Screen readers announce selections. Ensure options have descriptive labels.