Radio Group

Allows single selection from multiple options.

Anatomy

To set up the radio group correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Design impact on the asChild property

The RadioGroup.Item element of the radio group is a label element. This is because the radio group is a form control and should be associated with a label to provide context and meaning to the user. Otherwise, the HTML and accessibility structure will be invalid.

If you need to use the asChild property, make sure that the label element is the direct child of the RadioGroup.Item component.

Examples

Learn how to use the RadioGroup component in your project. Let’s take a look at the most basic example:

Disabling the radio group

To make a radio group disabled, set the disabled prop to true.

Setting the initial value

To set the radio group’s initial value, set the defaultValue prop to the value of the radio item to be selected by default.

Listening for changes

When the radio group value changes, the onValueChange callback is invoked.

API Reference

Item

PropTypeDefault
value
string
asChild
boolean
disabled
boolean
invalid
boolean

Root

PropTypeDefault
asChild
boolean
defaultValue
string
dir
'ltr' | 'rtl'"ltr"
disabled
boolean
form
string
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string label: string indicator: string item(value: string): string itemLabel(value: string): string itemControl(value: string): string itemHiddenInput(value: string): string }>
name
string
onValueChange
(details: ValueChangeDetails) => void
orientation
'horizontal' | 'vertical'
value
string

Label

PropTypeDefault
asChild
boolean

ItemText

PropTypeDefault
asChild
boolean

Indicator

PropTypeDefault
asChild
boolean

ItemControl

PropTypeDefault
asChild
boolean