chenzy-design

如何引入

import { Checkbox } from '@chenzy-design/svelte';

单个复选框，支持受控与非受控，及禁用状态。

默认复选框已选中禁用未选禁用已选

CheckboxGroup 以数据驱动方式渲染多选项，onChange 回调返回选中值数组。

选项 A 选项 B 选项 C（禁用）

已选：a

设置 type="card" 以整卡点击区渲染，extra 显示辅助说明，适合套餐选择场景。

专业版解锁全部高级特性团队版多人协作与权限管理企业版无边框卡片项

已选：pro

extra 传入副文本，经 aria-describedby 关联，点击区域含辅助文本，过长自动换行。

Semi Design Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统

带辅助文本辅助文本更长时会自动换行，整块区域均可点击切换选中态

disabled 禁用复选框，选中/未选中均可禁用，禁用时不可聚焦与切换。

未选中 · 禁用已选中 · 禁用

indeterminate 表达部分选中态，配合 checkAll 实现全选/清空联动。

全选

摄影电影跑步

外部持有 checked/disabled，按钮编程式联动切换选中与禁用。

已选中 · 启用

direction 控制 CheckboxGroup 内布局，vertical（默认）或 horizontal。

type="pureCard" 带背景但无 checkbox 框的纯卡片样式。

套餐一 Semi Design 是由抖音前端与 UED 团队共同维护的设计系统

套餐二 Semi Design 是由抖音前端与 UED 团队共同维护的设计系统

套餐三 Semi Design 是由抖音前端与 UED 团队共同维护的设计系统

属性	说明	类型	默认值
`checked`	受控选中；提供则为受控	`boolean`	undefined
`defaultChecked`	非受控初始选中	`boolean`	false
`indeterminate`	半选态（视觉横线）	`boolean`	false
`value`	Group 内的标识值	`string \| number`	undefined
`disabled`	—	`boolean`	false
`size`	—	`'small'\|'default'\|'large'`	default
`status`	—	`'default'\|'warning'\|'error'`	default
`type`	展示形态；card 带边框背景且整卡为命中区，pureCard 无边框。Group 透传，单项可覆盖	`'default'\|'card'\|'pureCard'`	default
`name`	—	`string`	undefined
`extra`	辅助说明，aria-describedby 关联	`string`	undefined
`id`	—	`string`	useId()
`addonId`	标签内容容器 id，经 aria-labelledby 关联为可访问名	`string`	undefined
`extraId`	辅助说明 id，未提供则由内部生成	`string`	undefined
`preventScroll`	autoFocus 聚焦时是否阻止滚动（对齐 Semi）	`boolean`	undefined
`onChange`	—	`(checked: boolean) => void`	undefined
`children`	标签内容	`Snippet`	undefined

属性	类型	说明
`focus()`	`—`	命令式聚焦复选框（尊重 preventScroll），经组件实例调用（对齐 Semi）
`blur()`	`—`	命令式移除焦点（对齐 Semi）

变量	默认值	用法
`--cd-transition-delay-checkbox-bg`	`var(--cd-motion-delay-none)`	复选框-背景色-延迟时间
`--cd-transition-delay-checkbox-border`	`var(--cd-motion-delay-none)`	复选框-边框-延迟时间
`--cd-transition-duration-checkbox-bg`	`var(--cd-motion-duration-none)`	复选框-背景色-动画持续时间
`--cd-transition-duration-checkbox-border`	`var(--cd-motion-duration-none)`	复选框-边框-动画持续时间
`--cd-transition-function-checkbox-bg`	`var(--cd-motion-ease-in)`	复选框-背景色-过渡曲线
`--cd-transition-function-checkbox-border`	`var(--cd-motion-ease-in)`	复选框-边框-过渡曲线

ARIA role	`checkbox`
键盘交互	`Space`