Checkbox 复选框

允许用户在选中与未选中之间切换的控件。

基础用法

SCheckbox({ label: 'Accept terms and conditions', checked: this.terms!! })
SCheckbox({ label: 'Enable notifications', defaultChecked: true })
SCheckbox({ label: 'Disabled', disabled: true })
SCheckbox({ label: 'Required', invalid: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

半选

由子项驱动的“全选”复选框。

SCheckbox({
  label: 'Select all',
  checked: this.allChecked,
  indeterminate: this.someChecked && !this.allChecked,
  onCheckedChange: (v: boolean) => this.setAll(v)
})

网页近似预览，真机效果以 HarmonyOS 渲染为准。

尺寸、描述与卡片

sizing：'sm' | 'default' | 'lg'；card 把标签与描述包进一个可按压的带边框盒子。

SCheckbox({ label: 'Small', sizing: 'sm', defaultChecked: true })
SCheckbox({ label: 'Large', sizing: 'lg', defaultChecked: true })
SCheckbox({ label: 'Accept terms', description: 'By clicking this you agree to our terms.' })
SCheckbox({ label: 'Enable notifications', description: 'You can enable or disable them at any time.',
  card: true, defaultChecked: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SCheckbox

shadcn-vue 的 Checkbox：size-4 rounded-[4px] border border-input shadow-xs，选中时为 bg-primary border-primary text-primary-foreground，并显示 check 图标（size-3.5）。

变体：sizing 取 sm | default | lg；description（标签下方的弱化文字）；card（带边框、可按下的选择卡片，选中时高亮）。

indeterminate 会显示 minus 标记（对应 shadcn-vue 的 'indeterminate' 模型值）；点击后会触发 true，父组件应负责清除 indeterminate。可选的 label 也属于点击区域。请通过 onCheckedChange / !! 响应变化（控件自身的点击会接管 SCheckbox 上的 .onClick()）。

属性	类型	默认值	说明
checked!!	boolean | undefined	undefined	受控状态（配合 !! 使用）。留空则为非受控。
defaultChecked	boolean	false
indeterminate	boolean	false
disabled	boolean	false
invalid	boolean	false	错误外观（aria-invalid：destructive 边框）。
label	ResourceStr | undefined	undefined	显示在右侧的文字；同样可点击。
description	ResourceStr | undefined	undefined	标签下方弱化的辅助文字。
sizing	ChoiceSize ChoiceSize = 'sm' | 'default' | 'lg'	'default'
card	boolean	false	包裹复选框、标签与描述的带边框选择卡片。
tokens	CheckboxTokens	{}	实例级令牌覆盖（实例 → 主题 --checkbox-* → 配方），参见 {@link CheckboxTokens}。

事件	类型	默认值	说明
onCheckedChange	(v: boolean) => void	() => { }