cn hx components Checkbox

HxCheckbox / HxWithCheckCheckbox

绑定到模型字段的单选框。值通过可配置的值对进行匹配。

HxWithCheckCheckbox 添加验证功能（参见 WithCheck）。

// 布尔开关（选中=true，未选中=false）
<HxCheckbox $model={form} $field="agreed" text="我同意条款" />

// 自定义值对
<HxCheckbox $model={form} $field="status" values={['active', 'inactive']} text="启用" />

// 第 3 个元素为自定义判断函数
<HxCheckbox
  $model={form}
  $field="selectAll"
  values={[true, false, (modelValue) => isPartialSelection(modelValue)]}
  text="全选"
/>

Props

Prop	类型	默认值	说明
$model	HxObject<T>	—	响应式模型
$field	ModelPath<T> | HxDataPath	—	模型字段路径
values	[checkedVal, uncheckedVal, checkFn?]	[true, false]	第 1 个值 = 选中，第 2 个 = 未选中。可选的第 3 个元素是 (modelValue) => boolean 函数，用于判断模型值是否算作已选中
text	ReactNode	—	复选框旁的标签文本
enterToSwitchValue	boolean	false	Enter 键切换值
spaceToSwitchValue	boolean	true	Space 键切换值

原生 DOM 事件

常用：通常 $model/$field 绑定已足够，不需要手动监听事件。如需在切换时做额外处理，可用 onChange。

可用：onKeyDown、onKeyUp、onKeyPress、onFocus、onBlur、onClick、onMouseDown、onMouseUp、onMouseEnter、onMouseLeave。

全局配置

import { configHxCheckbox } from '@hx/components';
configHxCheckbox({ spaceToSwitchValue: true });