Radio

Radio buttons present mutually exclusive choices with Material 3 state styling and accessible native form semantics. Use presentation when the radio is only a visual indicator inside another accessible control, such as a clickable ListItem.

Option A

Checked: false

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="radio"][data-part="root"] left_clickLMBCopy
<input>	inputconditional	[data-scope="radio"][data-part="input"] left_clickLMBCopy
<span>	control	[data-scope="radio"][data-part="control"] left_clickLMBCopy
<span>	outer	[data-scope="radio"][data-part="outer"] left_clickLMBCopy
<span>	inner	[data-scope="radio"][data-part="inner"] left_clickLMBCopy
<span>	labelconditional	[data-scope="radio"][data-part="label"] left_clickLMBCopy

Props

Name	Description	Default	Control
disabledOptional	Whether the radio is disabled. boolean | undefined	false
presentationOptional	Render only the visual radio. The parent must provide interaction semantics. boolean | undefined	false
nameOptional	Name attribute for the native radio input. string | undefined	-	-
valueOptional	Value attribute for the native radio input. string | undefined	-	-
ariaLabelOptional	ARIA label forwarded to the native radio input. string | undefined	-	-
checkedRequired	- boolean	-

Events1

Name	Type	Description
update:checked	[value: boolean]	-

Slots1

Name	Parameters	Description
default	-	Optional label content rendered next to radio.

Styling18

Preview

Token	Description
--md-radio-disabled-dot-opacityDisabled Fallback0.38	Controls disabled dot opacity.
--md-radio-disabled-outline-opacityDisabled Fallback0.38	Controls disabled outline opacity.
--md-radio-disabled-selected-dot-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled selected dot color.
--md-radio-disabled-selected-outline-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled selected outline color.
--md-radio-disabled-unselected-outline-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled unselected outline color.
--md-radio-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls focus indicator color.
--md-radio-focus-indicator-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls focus indicator offset.
--md-radio-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-radio-icon-shapeShape Fallbackvar(--md-sys-shape-corner-full)	Controls icon shape.
--md-radio-icon-sizeLayout Fallback--dp(20)	Controls icon size.
--md-radio-selected-dot-colorState Fallbackvar(--md-sys-color-primary)	Controls selected dot color.
--md-radio-selected-dot-sizeState Fallback--dp(10)	Controls selected dot size.
--md-radio-selected-outline-colorState Fallbackvar(--md-sys-color-primary)	Controls selected outline color.
--md-radio-selected-outline-widthState Fallback--dp(2)	Controls selected outline width.
--md-radio-state-layer-sizeState Fallback--dp(40)	Controls state layer size.
--md-radio-target-sizeLayout Fallback--dp(40)	Controls target size.
--md-radio-unselected-outline-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected outline color.
--md-radio-unselected-outline-widthState Fallback--dp(2)	Controls unselected outline width.

Examples

Default

Option A

Checked: false

States

UncheckedCheckedDisabled uncheckedDisabled checked