Kotodama UI
指南
组件
低代码
Demo
指南
组件
低代码
Demo

Checkbox

原生 checkbox 封装。onChange 直接传出 boolean，可被 Form.Item 注入 checked / id / aria-* / onBlur。

文档站 Demo 跟随 Rspress 明暗主题（亮色用 admin，暗色自动切 dark）。

基础用法

<Checkbox onChange={(checked) => console.log(checked)}>
  同意服务条款
</Checkbox>

实时演示

尚未提交

与 Form 联用

required 对 false 不算空。需要「必须勾选」时用 validator：

<Form.Item
  name="agree"
  label="协议"
  rules={[{ validator: (v) => (v === true ? undefined : '请勾选') }]}
>
  <Checkbox>我已阅读并同意</Checkbox>
</Form.Item>

API

CheckboxProps

属性 类型 默认值 说明
checked boolean — 受控选中
defaultChecked boolean — 非受控初始
disabled boolean — 禁用
children ReactNode — 标签文案
id / name string — 落到内部 input（Form 可注入 id）
onChange (checked: boolean) => void — 变化回调
onBlur FocusEventHandler<input> — 失焦
aria-invalid / aria-describedby / aria-required — — 无障碍
className string — 追加类名
ON THIS PAGE