复选框
复选框用于确认彼此独立的选项，并清晰呈现未选中、已选中和禁用状态。当复选框仅作为另一个可访问控件（例如可点击的 ListItem）中的视觉指示器时，请使用 presentation。
在 presentation 模式下，控件仅占用 --md-checkbox-container-size（默认为 18dp），不提供独立的点击区域。--md-checkbox-target-size 仅适用于独立的交互式复选框（默认为 40dp）。间距和交互由父级负责。此模式适用于 ListItem 和 MenuItem。显式增大容器尺寸可能会使父级行高增大。
密度
默认几何尺寸根据 body-medium 字号确定。下方尺寸针对默认排版；紧凑排版和自定义排版会先按比例缩放基准值及其范围，再应用密度。显式几何尺寸 token 会绕过此计算。
可见形状的默认尺寸为 18dp，每个 --md-density 等级会改变 1dp，并限制在 14–22dp。选中标记和默认描边宽度会按比例缩放。此规则同样适用于 presentation 模式，此时父级负责间距和交互。
独立交互目标的默认尺寸为 40dp，每个密度等级会改变 2dp，并且形状每侧至少保留 4dp。状态层会随目标变化，其收缩速度慢于菜单行间距，以保持悬停反馈清晰可见。显式设置形状和目标尺寸 token 会分别覆盖对应的默认值。图标源校准和 --md-icon-scale 不会影响这些控件。
示例
默认
状态
混合状态
checked 管理提交的布尔值；indeterminate 管理混合视觉状态及原生 input.indeterminate 属性。本地状态可使用 v-model:indeterminate；分组状态由调用方管理时可传入计算属性。混合状态优先于勾选标记，并在原生 input 上暴露 aria-checked="mixed"。
用户操作遵循原生复选框行为：切换 checked、触发 update:checked，再通过 update:indeterminate(false) 清除 indeterminate。禁用复选框不会更新。Presentation 模式不渲染 input，也不会触发交互事件；语义由父级管理。组件不会推导分组选择状态。
参考
结构
| 元素 | 部件 | 选择器 |
|---|---|---|
<component> | root | [data-scope="checkbox"][data-part="root"]鼠标左键单击复制 |
<input> | input条件显示 | [data-scope="checkbox"][data-part="input"]鼠标左键单击复制 |
<span> | control | [data-scope="checkbox"][data-part="control"]鼠标左键单击复制 |
<span> | box | [data-scope="checkbox"][data-part="box"]鼠标左键单击复制 |
<span> | icon | [data-scope="checkbox"][data-part="icon"]鼠标左键单击复制 |
<span> | label条件显示 | [data-scope="checkbox"][data-part="label"]鼠标左键单击复制 |
属性
| 名称 | 说明 | 默认值 | 控件 |
|---|---|---|---|
shape可选 | Corner style; inherits the shared shape default. M3Shape | undefined | - | - |
disabled可选 | Whether the checkbox is disabled. boolean | undefined | false | |
presentation可选 | Render only the visual checkbox. The parent must provide interaction semantics. boolean | undefined | false | |
name可选 | Name attribute for the native checkbox input. string | undefined | - | - |
value可选 | Value attribute for the native checkbox input. string | undefined | - | - |
ariaLabel可选 | ARIA label forwarded to the native checkbox input. string | undefined | - | - |
indeterminate可选 | - boolean | undefined | false | |
checked必填 | - boolean | - |
事件2
| 名称 | 类型 | 说明 |
|---|---|---|
update:indeterminate | [value: boolean] | - |
update:checked | [value: boolean] | - |
插槽1
| 名称 | 参数 | 说明 |
|---|---|---|
default | - | Optional label content rendered next to checkbox. |
样式25
| Token | 说明 |
|---|---|
--md-checkbox-colorColor回退值 var(--md-sys-color-primary) | Default selected container color and selected state layer color. |
--md-checkbox-on-colorColor回退值 var(--md-sys-color-on-primary) | Default selected icon color. |
--md-checkbox-unselected-outline-colorColor回退值 var(--md-sys-color-on-surface-variant) | Outline color for the unchecked box. |
--md-checkbox-selected-container-colorColor回退值 var(--md-checkbox-color) | Container color for the checked box. |
--md-checkbox-selected-icon-colorColor回退值 var(--md-checkbox-on-color) | Checkmark color for the checked box. |
--md-checkbox-unselected-state-layer-colorState回退值 var(--md-sys-color-on-surface) | State layer color when unchecked. |
--md-checkbox-state-layer-colorState回退值 var(--md-checkbox-color) | Shortcut for the checked state layer color. |
--md-checkbox-selected-state-layer-colorState回退值 var(--md-checkbox-state-layer-color) | State layer color when checked. |
--md-checkbox-disabled-colorDisabled回退值 var(--md-sys-color-on-surface) | Base color used by disabled checkbox visuals. |
--md-checkbox-disabled-opacityDisabled回退值 0.38 | Default opacity for disabled checkbox visuals. |
--md-checkbox-disabled-unselected-outline-colorDisabled回退值 var(--md-checkbox-disabled-color) | Outline color for disabled unchecked state. |
--md-checkbox-disabled-unselected-outline-opacityDisabled回退值 var(--md-checkbox-disabled-opacity) | Outline opacity for disabled unchecked state. |
--md-checkbox-disabled-selected-container-colorDisabled回退值 var(--md-checkbox-disabled-color) | Container color for disabled checked state. |
--md-checkbox-disabled-selected-container-opacityDisabled回退值 var(--md-checkbox-disabled-opacity) | Container opacity for disabled checked state. |
--md-checkbox-disabled-selected-icon-colorDisabled回退值 var(--md-sys-color-surface) | Checkmark color for disabled checked state. |
--md-checkbox-disabled-selected-icon-opacityDisabled回退值 var(--md-checkbox-disabled-opacity) | Checkmark opacity for disabled checked state. |
--md-checkbox-label-colorLabel回退值 var(--md-sys-color-on-surface) | Color of the optional label slot. |
--md-checkbox-container-sizeLayout回退值 Typography and density (18dp at default typography and density 0) | Size of the visible checkbox box. |
--md-checkbox-target-sizeLayout回退值 40dp + 2dp per density step; at least box size + 8dp; presentation uses box size | Size of the interactive control and state layer area. |
--md-checkbox-state-layer-shapeShape回退值 var(--md-sys-shape-corner-full) | Shape of the state layer area. |
--md-checkbox-shapeShape回退值 --dp(2) | Corner radius of the visible checkbox box. |
--md-checkbox-outline-widthLayout回退值 Resolved box size / 9 | Outline width of the unchecked box. |
--md-checkbox-focus-indicator-colorFocus回退值 var(--md-sys-color-secondary) | Focus ring color. |
--md-checkbox-focus-indicator-thicknessFocus回退值 var(--md-sys-state-focus-indicator-thickness) | Focus ring thickness. |
--md-checkbox-focus-indicator-offsetFocus回退值 var(--md-sys-state-focus-indicator-outer-offset) | Focus ring offset. |