Radio

单选按钮用于呈现互斥选项，采用 Material 3 状态样式，并保留原生表单语义和无障碍支持。 当单选按钮仅作为另一个无障碍控件中的视觉指示器时（例如可点击的 ListItem），请使用 presentation。

v-model:checked 控制单选按钮的布尔选中状态。可选的 value 仍是原生表单提交值，不会改变 checked 模型的类型。单选按钮组中的每个按钮应根据同一个共享选中值计算其 checked 状态。

选项 A

已选中：false

在 presentation 模式下，单选按钮仅占用 --md-radio-icon-size（默认为 20dp）。--md-radio-target-size 仅用于独立交互目标（默认为 40dp），不会影响呈现模式的布局。间距、焦点和激活行为由父级负责；详见 Menu 选择。

密度

默认几何尺寸根据 body-medium 字号确定。下方尺寸针对默认排版；紧凑排版和自定义排版会先按比例缩放基准值及其范围，再应用密度。显式几何尺寸 token 会绕过此计算。

可见形状的默认尺寸为 20dp，每个 --md-density 等级会改变 1dp，并限制在 16–24dp。选中标记和默认描边宽度会按比例缩放。此规则同样适用于 presentation 模式，此时父级负责间距和交互。

独立交互目标的默认尺寸为 40dp，每个密度等级会改变 2dp，并且形状每侧至少保留 4dp。状态层会随目标变化，其收缩速度慢于菜单行间距，以保持悬停反馈清晰可见。显式设置形状和目标尺寸 token 会分别覆盖对应的默认值。图标源校准和 --md-icon-scale 不会影响这些控件。

密度 0密度 -2密度 -4

示例

默认

Option A

Checked: false

状态

UncheckedCheckedDisabled uncheckedDisabled checked

参考

结构

高亮显示

元素	部件	选择器
<component>	root	[data-scope="radio"][data-part="root"] left_click鼠标左键单击复制
<input>	input条件显示	[data-scope="radio"][data-part="input"] left_click鼠标左键单击复制
<span>	control	[data-scope="radio"][data-part="control"] left_click鼠标左键单击复制
<span>	outer	[data-scope="radio"][data-part="outer"] left_click鼠标左键单击复制
<span>	inner	[data-scope="radio"][data-part="inner"] left_click鼠标左键单击复制
<span>	label条件显示	[data-scope="radio"][data-part="label"] left_click鼠标左键单击复制

属性

名称	说明	默认值	控件
disabled可选	Whether the radio is disabled. boolean | undefined	false
presentation可选	Render only the visual radio. The parent must provide interaction semantics. boolean | undefined	false
name可选	Name attribute for the native radio input. string | undefined	-	-
value可选	Value attribute for the native radio input. string | undefined	-	-
ariaLabel可选	ARIA label forwarded to the native radio input. string | undefined	-	-
checked必填	- boolean	-

事件1

名称	类型	说明
update:checked	[value: boolean]	-

插槽1

名称	参数	说明
default	-	Optional label content rendered next to radio.

样式17

预览

Token	说明
--md-radio-disabled-dot-opacityDisabled 回退值0.38	Controls disabled dot opacity.
--md-radio-disabled-outline-opacityDisabled 回退值0.38	Controls disabled outline opacity.
--md-radio-disabled-selected-dot-colorDisabled 回退值var(--md-sys-color-on-surface)	Controls disabled selected dot color.
--md-radio-disabled-selected-outline-colorDisabled 回退值var(--md-sys-color-on-surface)	Controls disabled selected outline color.
--md-radio-disabled-unselected-outline-colorDisabled 回退值var(--md-sys-color-on-surface)	Controls disabled unselected outline color.
--md-radio-focus-indicator-colorFocus 回退值var(--md-sys-color-secondary)	Controls focus indicator color.
--md-radio-focus-indicator-offsetFocus 回退值var(--md-sys-state-focus-indicator-outer-offset)	Controls focus indicator offset.
--md-radio-focus-indicator-thicknessFocus 回退值var(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-radio-icon-shapeShape 回退值var(--md-sys-shape-corner-full)	Controls icon shape.
--md-radio-icon-sizeLayout 回退值Typography and density (20dp at default typography and density 0)	Controls icon size.
--md-radio-selected-dot-colorState 回退值var(--md-sys-color-primary)	Controls selected dot color.
--md-radio-selected-dot-sizeState 回退值Resolved circle size / 2	Controls selected dot size.
--md-radio-selected-outline-colorState 回退值var(--md-sys-color-primary)	Controls selected outline color.
--md-radio-selected-outline-widthState 回退值Resolved circle size / 10	Controls selected outline width.
--md-radio-target-sizeLayout 回退值40dp + 2dp per density step; at least circle size + 8dp; presentation uses circle size	Controls target size.
--md-radio-unselected-outline-colorState 回退值var(--md-sys-color-on-surface-variant)	Controls unselected outline color.
--md-radio-unselected-outline-widthState 回退值Resolved circle size / 10	Controls unselected outline width.