Checkbox 复选框

受控复选框。@Binding var checked 双向绑定，支持三态（勾选 / 未勾选 / 不确定）。

契约源：lh-ui-core/specs/checkbox.json · 黄金用例：lh-ui-core/cases/checkbox.json（6 条，已翻译为 XCTest，macOS 宿主即可运行）

状态

勾选态为实心主色方块 + 白色勾形；不确定态为实心主色方块 + 白色横杠；未勾选为描边空框。

9:41Checkbox 状态

未勾选已勾选

不确定禁用

HTML 模拟预览（iOS / SwiftUI 外观），非真机渲染

swift

@State private var checked = false

LhCheckbox(checked: $checked, label: "已勾选") { newValue in
  // onChange
}

尺寸

三档尺寸映射到 checkbox.size 令牌；勾形描边宽度取 checkbox.checkWidth，不确定态横杠宽度为方框尺寸乘 checkbox.dashScale（50%）。

9:41Checkbox 尺寸

小号中号大号

HTML 模拟预览（iOS / SwiftUI 外观），非真机渲染

不确定态

indeterminate = true 时不显示勾形而显示横杠；点击后必定变为勾选（黄金用例 indeterminate-becomes-checked），而非切换。

swift

@State private var checked = false

LhCheckbox(checked: $checked, label: "全选", indeterminate: somePartial) { _ in }

API

Props

属性	说明	类型	默认值
`checked`	勾选状态（受控双向绑定）	`Bool`	—
`indeterminate`	是否不确定态（显示横杠，点击后变勾选）	`Bool`	`false`
`disabled`	是否禁用（不触发 onChange）	`Bool`	`false`
`size`	复选框尺寸，映射到尺寸令牌	`LhCheckboxSize`	`.medium`
`label`	文字标签	`String`	`""`
`onChange`	状态变化回调，payload 为新值	`((Bool) -> Void)?`	`nil`

LhCheckboxSize

值	尺寸
`.small`	`checkbox.size.small`（16pt）
`.medium`	`checkbox.size.medium`（20pt）
`.large`	`checkbox.size.large`（24pt）

颜色

状态	方块底色	标记色
未勾选	透明 + `color.border.base` 描边（`checkbox.borderWidth`）	—
勾选 / 不确定	`color.primary.default`	`color.onPrimary`
禁用	`color.disabled.bg` + `color.disabled.border` 描边	`color.disabled.text`

令牌对照

令牌	用途
`checkbox.size.{small,medium,large}`	三档尺寸
`checkbox.borderRadius` / `checkbox.borderWidth`	圆角（跟随 `radius.small`）与描边宽度
`checkbox.checkWidth`	勾形描边宽度
`checkbox.dashScale`	不确定态横杠相对方框的比例（50%）
`checkbox.gap`	方框与文字间距（跟随 `spacing.sm`）
`color.primary.default` / `color.onPrimary`	勾选态底/标记色
`color.border.base`	未勾选描边色
`color.disabled.{bg,border,text}`	禁用态三色

黄金用例对照

case id	断言	本地测试
`tap-toggles-and-emits-onchange`	点击翻转并回调 `onChange(true)`	`testTapTogglesAndEmitsOnChange`
`tap-checked-unchecks`	已勾选点击变未勾选	`testTapCheckedUnchecks`
`disabled-blocks-change`	禁用态不触发 onChange	`testDisabledBlocksChange`
`checked-uses-primary-tokens`	勾选态消费主色与 onPrimary	`testCheckedUsesPrimaryTokens`
`unchecked-uses-border-token`	未勾选消费描边令牌	`testUncheckedUsesBorderToken`
`indeterminate-becomes-checked`	不确定态点击后必为勾选	`testIndeterminateBecomesChecked`

另有专项：testSizeUsesSizeTokens / testStrokeUsesCheckboxTokens / testDarkColorsComeFromDarkTokens / testDisabledInDarkUsesDarkDisabledTokens / testDimensionsAreIdenticalInDarkMode / testCheckboxViewInitAcceptsConstant。

bash

swift test --filter LhCheckboxTests    # macOS 宿主即可跑，无需模拟器

Checkbox 复选框 ​

状态 ​

尺寸 ​

不确定态 ​

API ​

Props ​

LhCheckboxSize ​

颜色 ​

令牌对照 ​

黄金用例对照 ​