Skip to content

Checkbox 复选框 ​

三态选中控件。支持选中 / 未选中 / 半选(不确定)三态,可禁用。

契约源:lh-ui-core/specs/checkbox.json · 黄金用例:lh-ui-core/cases/checkbox.json(6 条,已翻译为 hypium 测试)

基本用法 ​

checked 受控,点击切换并触发 onChange 携带新选中态。

9:41Checkbox 基本

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

typescript
LhCheckbox({
  checked: this.agreed,
  label: '同意服务条款',
  onChange: (checked: boolean) => { this.agreed = checked },
})

半选与禁用 ​

indeterminate 为 true 时呈现次要色横杠;点击半选态变为选中 (黄金用例 indeterminate-becomes-checked)。disabled 阻止切换。

9:41Checkbox 尺寸与禁用

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

API ​

Props ​

属性说明类型默认值
checked是否选中booleanfalse
indeterminate是否半选(不确定);点击后变为选中booleanfalse
disabled是否禁用;禁用时不触发 onChangebooleanfalse
label文字标签string''
size复选框尺寸,映射到 checkbox.size 令牌LhCheckboxSizeMedium
onChange点击切换时触发,携带新选中态(checked: boolean) => void空函数

LhCheckboxSize ​

值size
Smallcheckbox.size.small(16vp)
Mediumcheckbox.size.medium(20vp)
Largecheckbox.size.large(24vp)

选中态:底色 color.primary.default、勾 color.onPrimary、描边主色; 未选中态:透明底、描边 color.border.base;半选态:次要色横杠;禁用态取 color.disabled.*。

令牌对照 ​

令牌用途
checkbox.size.{small,medium,large}三档尺寸
checkbox.borderRadius / checkbox.borderWidth圆角与描边宽度(2 / 2vp)
checkbox.checkWidth勾形描边宽度
checkbox.gap复选框与文字间距(8vp)
color.primary.default / color.onPrimary选中底 / 勾色
color.border.base未选中描边色
color.text.secondary半选横杠色
color.disabled.{bg,text,border}禁用态三色
typography.fontSize.base标签字号

黄金用例对照 ​

cases/checkbox.json 的 6 条断言与 hypium 测试的对应关系(entry/src/test/Checkbox.test.ets):

case id断言本地测试
tap-toggles-and-emits-onchange点击切换并触发 onChangetap_toggles_checked
tap-checked-unchecks选中态点击变为未选中tap_checked_unchecks
disabled-blocks-change禁用态不触发 onChangedisabled_is_not_interactive
checked-uses-primary-tokens选中态消费主色令牌checked_uses_primary_tokens
unchecked-uses-border-token未选中态消费描边令牌unchecked_uses_border_token
indeterminate-becomes-checked半选态点击变为选中indeterminate_becomes_checked / indeterminate_uses_dash_mark

另有暗色专项:dark_colors_come_from_dark_tokens / dimensions_are_identical_in_dark_mode。 运行:DevEco Studio 右键 entry/src/test → Run Tests。