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 packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`value`	`string`	—	Controlled selected value
`defaultValue`	`string`	—	Default selected value
`onValueChange`	`(value: string) => void`	—	Callback fired when selection changes
`className`	`string`	—	packages.commonProps.className.description
`asChild`	`boolean`	`false`	packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2

RadioGroupItem

Individual radio button option within a RadioGroup packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.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`	—	packages.commonProps.className.description
`asChild`	`boolean`	`false`	packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2

RadioField

RadioField extends RadioGroup with form integration, labels, error handling, and validation support. Use RadioField when building forms with Conform. packages.composedComponents.extends RadioGroup. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.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`	—	packages.commonProps.className.description
`asChild`	`boolean`	`false`	packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2

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.

packages.title