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.

v-model:checked controls the radio's boolean checked state. The optional value remains the native form-submission value and does not change the checked model's type. For a radio group, derive each radio's checked state from one shared selected value.

Option A

Checked: false

In presentation mode, the radio occupies only --md-radio-icon-size (20dp by default). --md-radio-target-size retains the standalone interaction target (40dp by default) and does not affect presentation layout. The parent owns spacing, focus, and activation; see Menu selection.

Density

Default geometry follows the body-medium font size. The dimensions below describe default typography; compact and custom typography scale the baseline and its bounds before applying density. Explicit geometry tokens bypass this calculation.

The visible shape starts at 20dp and changes by 1dp per --md-density step, clamped to 16–24dp. Selection marks and default stroke widths scale proportionally. This also applies in presentation mode, where the parent owns spacing and interaction.

Standalone targets start at 40dp and change by 2dp per density step, retaining at least 4dp on each side of the visible shape. The state layer follows the target, shrinking more slowly than menu row spacing to keep hover feedback visible. Explicit shape and target-size tokens override their respective defaults. Icon source calibration and --md-icon-scale do not affect these controls.

density 0density -2density -4

Examples

Default

Option A

Checked: false

States

UncheckedCheckedDisabled uncheckedDisabled checked

Reference

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.

Styling17

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 FallbackTypography and density (20dp at default typography and density 0)	Controls icon size.
--md-radio-selected-dot-colorState Fallbackvar(--md-sys-color-primary)	Controls selected dot color.
--md-radio-selected-dot-sizeState FallbackResolved circle size / 2	Controls selected dot size.
--md-radio-selected-outline-colorState Fallbackvar(--md-sys-color-primary)	Controls selected outline color.
--md-radio-selected-outline-widthState FallbackResolved circle size / 10	Controls selected outline width.
--md-radio-target-sizeLayout Fallback40dp + 2dp per density step; at least circle size + 8dp; presentation uses circle size	Controls target size.
--md-radio-unselected-outline-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected outline color.
--md-radio-unselected-outline-widthState FallbackResolved circle size / 10	Controls unselected outline width.