Radio Group

A set of checkable buttons where only one can be checked at a time.

Radix UI Radio Group

When To Use

When a user needs to select a single option from a list of mutually exclusive choices
When the number of available options can comfortably fit in the available space
When immediate feedback or visibility of all options is needed without requiring a dropdown
When form design clarity benefits from a vertical or horizontal list of visible options

Examples

Basic

A basic radio group with default styling.

Basic#

Option One

Option Two

Option Three

With Label

Radio group with form labels for better accessibility.

With Label#

Select your preferred notification method

We'll send you email notifications about account activity.

SMS

We'll send you text messages about account activity.

Push Notification

We'll send you push notifications about account activity.

Disabled

Disabled radio group and individual radio items.

Disabled#

Custom

Radio group with custom styling and layout.

Custom#

Select Theme

Selected theme: Light

Props

RadioGroup

Prop	Type	Default
`onValueChange?`	`((value: string) => void)`	-
`value?`	`string \| null`	-
`loop?`	`boolean`	-
`orientation?`	`"horizontal" \| "vertical"`	-
`disabled?`	`boolean`	-
`required?`	`boolean`	-
`name?`	`string`	-
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-

RadioGroupItem

Prop	Type	Default
`required?`	`boolean`	-
`checked?`	`boolean`	-
`asChild?`	`boolean`	-
`value`	`string`	-
`type?`	`"button" \| "submit" \| "reset"`	-
`formTarget?`	`string`	-
`formNoValidate?`	`boolean`	-
`formMethod?`	`string`	-
`formEncType?`	`string`	-
`formAction?`	`string \| ((formData: FormData) => void \| Promise<void>)`	-
`disabled?`	`boolean`	-
`key?`	`Key \| null`	-
`form?`	`string`	-

Accessibility

The Radio Group component adheres to the WAI-ARIA Radio Group Pattern.

The RadioGroup uses role="radiogroup" and each RadioGroupItem has role="radio".
When a RadioGroupItem is checked, aria-checked is set to true.
Radio items are properly labeled using either aria-label or associated form labels.
Keyboard users can navigate between options using arrow keys and select options with Space.
Focus management follows logical tab order and highlights the active option.

Progress

Displays an indicator showing the completion progress of a task.

Scroll Area

A scrollable container with a custom scrollbar that is consistent across browsers.