Radio

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

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.BodyLarge`	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.

Radio / Usage

Radio / Accessibility

On this page

Radio with Label Position

Right Position (Default)

Left Position

Radio Group with Label

Horizontal Radio Group

Controlled Radio Group

Disabled Radio

Radio with Children

Radio

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

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.BodyLarge`	Text type for the group label.