RadioItem and RadioGroup provide single-selection interfaces for choosing one option from a set of mutually exclusive choices. RadioItem displays a standalone radio button, while RadioGroupItem is used within RadioGroup for managed selection. The components are built on Radix UI and ensure consistent selection patterns across the interface with full keyboard and screen reader accessibility.
For card-based single-select with descriptions, see Radio cards.
Props
RadioItem
Name
Default
Description
value
required
The value of the radio button.
name
The name attribute for grouping standalone radio inputs.
labelValue
Text to display as the label. If not provided, children is used. LocalizedMessage from formatMessage.
labelPosition
RadioLabelPosition.Right
Position of the label relative to the radio button. Options: Left, Right.
checked
Whether the radio button is checked (controlled component).
defaultChecked
Whether the radio button is checked by default (uncontrolled component).
disabled
false
Whether the radio button is disabled.
children
Label content when labelValue is not provided.
RadioGroup
Name
Default
Description
children
required
RadioGroupItem components to display in the group.
name
The name attribute for the radio group.
value
Currently selected value (controlled component).
defaultValue
Default selected value (uncontrolled component).
onValueChange
Callback function called when selection changes: (value: string) => void.
direction
FlexDirection.Column
Layout direction for radio buttons. Options: Column, Row.
label
Optional label text displayed above the radio group. LocalizedMessage from formatMessage.
labelType
TextType.Subtitle
Text type for the group label.
Basic Radio Group
Use for simple single-selection lists.
Radio with Label Position
Control label placement relative to the radio button.
Right Position (Default)
Left Position
Radio Group with Label
Add a group label to provide context.
Horizontal Radio Group
Arrange radio buttons horizontally.
Controlled Radio Group
Control selection state programmatically.
Disabled Radio
Disable specific options or the entire group.
Radio with Children
Use children for label content when you need more control.