表单 · 5 / 21
Checkbox st-checkbox
复选框：选中 / 不确定 / 禁用 / 语义色。checked 与 indeterminate 都是标签属性，ofa 页面用 attr: 绑定；点击文字也能切换，Space 键盘可用。
基础状态
无属性为未选中，checked 为选中，indeterminate 显示横线表示部分选中。indeterminate 只是视觉与语义状态，用户点击后会退出并变成选中；没有标签内容时文字区自动隐藏。
LIVE
st-checkbox示例代码
<st-checkbox>未选中</st-checkbox>
<st-checkbox checked>已选中</st-checkbox>
<st-checkbox indeterminate>不确定态</st-checkbox>color 语义色
color 同时作用于选中态底色、描边和对勾色，适合表达错误、成功等业务状态。它只影响选中态；未选中时边框恒为 on-surface-variant。
LIVE
color示例代码
<st-checkbox color="error" checked>错误色</st-checkbox>
<st-checkbox color="success" checked>成功色</st-checkbox>disabled 组合
disabled 阻断点击与键盘，并降低到 0.38 透明度。它可与 checked、indeterminate 任意组合，用来展示不可修改的已选结果或半选结果。
LIVE
disabled示例代码
<st-checkbox disabled>禁用未选</st-checkbox>
<st-checkbox disabled checked>禁用已选</st-checkbox>
<st-checkbox disabled indeterminate>禁用半选</st-checkbox>分组多选与受控绑定
每个选项的 checked 绑定到独立 data 字段，change 时把 hasAttribute("checked") 写回即可。标签文字属于点击热区，不需要再包 label；汇总文本由 getter 计算，不必额外维护一份状态。
LIVE
attr:checked / on:change示例代码
<st-checkbox attr:checked="apple" on:change="apple = $event.target.hasAttribute('checked')">
苹果
</st-checkbox>全选与 indeterminate
父级复选框同时绑定 checked 与 indeterminate：全选时 checked，部分选中时 indeterminate，全不选时两者都为 false。子项变化后重算父级，父级点击则统一写入三个子项。
LIVE
全选 / 半选示例代码（父级同步）
<st-checkbox attr:checked="allChecked" attr:indeterminate="allIndeterminate"
on:change="toggleAll">全选</st-checkbox>
<!-- 子项 change 后重算：全选 → checked；部分 → indeterminate -->尺寸与 change 事件
默认尺寸基于 em，改宿主 font-size 会同时缩放方框、对勾和文字间距。change 只在用户切换时派发，事件里读取属性即可得到最新状态。
LIVE
font-size / change
12px
小号
14px（默认）
默认
20px
大号
change 计数
点我
示例代码
<st-checkbox style="font-size: 20px;" checked>大号</st-checkbox>
<st-checkbox on:change="count += 1">点我</st-checkbox>属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
checked | boolean | 无 | 选中态；点击自动同步 |
indeterminate | boolean | 无 | 不确定态；用户点击后退出并变为选中 |
disabled | boolean | 无 | 0.38 透明度，阻断交互 |
color | M3 角色名 / 自定义变量名 | 无 | 选中态底色 / 对勾色 |
插槽 / 事件 / 注意
- 插槽：默认插槽是标签文字；内容为空时文字区自动隐藏。
- 事件：
change（bubbles + composed），触发时宿主属性已同步。 - 布尔属性用
attr:checked="expr"/attr:indeterminate="expr"；不要用:checked。 color只影响选中态；未选中边框恒为 on-surface-variant。- 交互由内部透明原生 checkbox 承载：点文字可切换，Space 可切换。