CheckboxGroup 复选框组
从一组选项中选择任意多项。
用法
从一组选项中选择任意多项
通知方式
邮件
短信
推送通知
组件结构
加粗的是必需部件。
data-scope="checkbox-group"：root · label · item · indicator · item-text · item-description · hidden-input · select-all-trigger
示例
全选与半选
使用 itemValues 计算全选和半选状态
通知方式
全选
邮件
短信
推送通知
横向排布
使用 orientation 设置排列方向
通知渠道
邮件
短信
推送
禁用与只读
禁用项不可操作，只读项仍可聚焦
整组禁用
芝士
培根
整组只读
芝士
培根
单项禁用
芝士
松露
尺寸
size 决定方框与条目文字的几何档位，组标题不随档
sm
邮件
短信
md
邮件
短信
lg
邮件
短信
卡片
variant="card" 把每个选项画成一张可点的卡；collection 里的 description 铺成文案下方的说明行
通知方式
邮件每天早上汇总一封
短信只发需要立即处理的事项
推送通知在手机与桌面端即时提醒
限定选择数
min / max 约束选中数：选满时没选的项置灰，降到下限时已选的项摘不掉
擅长方向（选 1 到 2 项）
设计
前端
后端
数据
已选 1 项设计指引
何时使用
- 用于偏好设置、筛选条件和批量选择。
- 选项之间要靠一两句说明才分得清（通知渠道、附加服务）时，用
variant="card"把每个选项画成一张卡。
何时不用
特性
collection提供选项文本与禁用状态。- 不写结构时按标准结构铺出整套部件（Vue 不写默认插槽、React 不给 children、Web Components 不写部件或只写
root），三端出自同一个结构函数：label给标题文字，每个条目带表单影子、方框、文字与说明；全选格要用时手写结构。Web Components 里标题与条目文字可以写在宿主的直接子节点上接管：slot="label"、slot="item:<值>"。 - 全选触发器自动计算全选与半选状态。
min/max约束选中数：选满max时没选的条目报aria-disabled并置灰、点不动，降到min时已选的条目摘不掉；全选只补到max为止，已满时再按是全不选（仍保住min）。被下限锁住的已选项照常随表单提交。约束只落在用户的点选与全选上，程序化的setValue与初值原样落地；min大于max或不是非负整数时立即报错。插槽载荷与元素上的atMax/atMin报此刻是否顶到了上下限。orientation设置横向或纵向排列。- 方框是字段家族的控制盒：不填底、描边与无影，勾中后以语气色填充；整行接 Action Control row 档，悬停 / 按下换面不缩放，方框随行换到承载面阶梯的下一档。
variant是结构形态：缺省list是一列「方框 + 文案」的行；card把每个条目画成一张可点的描边卡（surface 圆角，白底承载阶梯悬停 100 → 按下 200），方框在卡的行首，整张卡是命中区。勾中的卡换品牌淡底（写了tone换语气淡底），与表格选中行、穿梭框选中项同一种标记，描边不换；只读时卡片不给悬停与按下面。竖排时卡片撑满一列，横排时各卡等分一行、放不下就折行。全选触发器在两种形态里都是一行。item-description是文案下方的说明行（13 /--xh-fg-muted），与文案一起构成条目的可及名；collection里的description会自动铺出这一行。- 根是
role=group，label部件真渲染了时才经aria-labelledby给组命名；不写标题时给根节点写aria-label。Vue / React 的label属性不论手写选项还是数据驱动都会铺出标题。 - 值可以是任意类型：
value、defaultValue、itemValues与collection里交进来数字、对象都行，onValueChange、v-model、插槽与renderItem拿到的是原值；Vue 与 React 按value或collection推断值的类型，几处对不上、valueKey写错字段编译即报错。数字转成字符串当键，对象值给valueKey（字段名或取值函数），同一个选项每次都是新对象（接口刚取回来）也认得出来，不给按对象身份认；键也是条目的data-value与随表单提交的值。Vue 的h()推断不了泛型，那里按宽松的类型检查；Web Components 经 property 交值，写querySelector<XhCheckboxGroupElement<number>>("xh-checkbox-group")收窄。
组合
最佳实践
- 使用简短、互不重叠的选项标签。
- 保持选项顺序稳定。
- 设了
min/max就在标题或说明里写明范围（「选 1 到 2 项」），置灰的条目不会自己解释为什么点不动。 - 卡片里只放一两句说明，不放按钮、链接等第二个可点目标：整张卡是一次勾选，内嵌的动作会与勾选抢同一次点击。
反模式
- 用复选框组表达互斥选项。
- 将全选项放在列表末尾。
API 参考
产物
| 层 | 值 |
|---|---|
| 自定义元素 | <xh-checkbox-group> |
| Vue 组件 | XhCheckboxGroupIndicator XhCheckboxGroupItem XhCheckboxGroupItemDescription XhCheckboxGroupItemText XhCheckboxGroupLabel XhCheckboxGroupRoot XhCheckboxGroupSelectAllTrigger |
| 组合式函数 | useCheckboxGroup |
| 状态机 | checkboxGroupMachine |
| 皮肤 | @xihan-ui/styles/checkbox-group.css |
Props
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
collection | CheckboxGroupNode<V>[] | 条目数据，显示文本与禁用的事实源。提供后条目部件只需声明 value。 未提供时回到文本与禁用都写在条目部件上的方式。 | |
valueKey | SelectionValueKey<V> | 对象值怎样取键：字段名或取值函数。同一个选项每次都是新对象（接口刚取回来）时给它； 不给时按对象身份认。值不是对象时用不着。键也是条目的 data-value 与随表单提交的值。 | |
value | V[] | 选中值集合。提供即受控：cell 直读 prop，写入只发 onValueChange 不落内部值。 | |
defaultValue | V[] | ||
itemValues | V[] | 组内全部条目的值，按书写顺序声明；未提供时 checkedState 退化为 unchecked / indeterminate 两态。 | |
min | number | 至少选几项，非负整数；选中数降到它时已选的条目改不动（aria-disabled）。 只约束用户的点选与全选，不校验程序化写入与初值。 | |
max | number | 至多选几项，非负整数；选中数到了它时未选的条目改不动（aria-disabled），全选只补到它为止。 只约束用户的点选与全选，不校验程序化写入与初值。min 大于 max 立即报错。 | |
disabled | boolean | 整组禁用：每一项随之禁用，且隐藏输入不参与提交。 | |
readOnly | boolean | 只读：仍可聚焦与朗读，但用户不可修改。 | |
invalid | boolean | 校验失败标注，写入每个条目的 aria-invalid。 | |
required | boolean | 必填：至少选一项。根与标题写 data-required（标题据此画星号）；一项都没选时每份表单影子带原生 required， 拦下空表单的提交，选了任何一项就都撤掉。影子是 inert 的、不可聚焦，浏览器的校验气泡落不到它上面， 提交照样被拦下，错误文案交给字段给出。组根是 role=group，不收 aria-required； 条目的 aria-required 说的是「这一项必须勾上」，也不对，读屏经字段的描述链得知必填。 | |
name | string | 表单字段名；提供后每个条目的隐藏输入才带 name，同名多值一并提交。 | |
orientation | Orientation | 视觉排布，默认 vertical。只输出 data-orientation，不输出 aria-orientation。 | |
tone | Tone | 语气：brand / neutral / success / warning / danger / info，决定勾选方框使用哪族颜色。 | |
size | Size | 尺寸：sm / md / lg，决定方框与文字的几何档位。 | |
variant | CheckboxGroupVariant | 结构形态，默认 list；card 把每个条目画成一张可点的卡。 | |
labelled | boolean | 作者渲染了 label 部件时置真，由适配器统计而不是判断标题文字是否有值。 为假时根不输出 aria-labelledby：指向未渲染的 id 会让组没有名字，作者写在根上的 aria-label 也会被它压住。 | |
ariaLabel | string | 不显示出来的名字，写成 aria-label 落在与字段标签同一个部件上。 放进字段（字段接线）或渲染了 label 部件时名字以它们为准，aria-labelledby 盖过它。 | |
onValueChange | (details: CheckboxGroupValueChangeDetails<V>) => void | value 变化意图回调；受控时是唯一出口，非受控时随内部写入一并通知。 |
CheckboxGroupNode
collection 的元素。
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
value | V | 是 | |
label | string | 展示文本；默认回退为值（不是字符串的值退回它的键）。 | |
description | string | 说明文字，写入 item-description 部件；未提供时本条不铺该部件。 | |
disabled | boolean | 条目禁用：仍可聚焦、仍占一个 Tab 停靠点，但不可修改，全选也跳过它。 |
事件
自定义元素将载荷放在 detail；Vue 使用同名 emit。
| 事件 | 载荷 | 说明 |
|---|---|---|
value-change | CheckboxGroupValueChangeDetails | 选中值变化；detail 为 { value: 值[] }，值是 value / collection 里交进来的原值（字符串、数字或对象） |
插槽
仅列出带载荷的插槽。
| Vue 组件 | 插槽 | 载荷 | 说明 |
|---|---|---|---|
XhCheckboxGroupRoot | default | CheckboxGroupRootSlotProps<V> | |
XhCheckboxGroupRoot | label | — | |
XhCheckboxGroupRoot | item | CheckboxGroupNodeMeta<V> |
React 适配器 props
只列各组件自己声明的那些：继承自 ComponentPropsWithRef 的 DOM 属性不在其中，根组件上与上面 Props 表同名的也不重复列。Vue 的对应物是上面的插槽表。
| React 组件 | 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|---|
XhCheckboxGroupItem | value | unknown | 是 | 条目代表的值，与根上的值同类型：字符串、数字或对象。 |
XhCheckboxGroupItem | disabled | boolean | 默认交给 connect 查询 collection，写死 false 会覆盖数据中的禁用。 | |
XhCheckboxGroupRoot | label | ReactNode | 标题文字。提供后不必再写 label 部件。 | |
XhCheckboxGroupRoot | renderItem | (node: CheckboxGroupNodeMeta<V>) => ReactNode | 每个条目的自定义内容；未提供时使用 collection 中的 label。 | |
XhCheckboxGroupRoot | children | SlotChildren<CheckboxGroupRootSlotProps<V>> |
状态
公开状态写入 data-state。
| 部件 | 取值 |
|---|---|
item | 'checked' | 'unchecked' |
indicator | 'checked' | 'unchecked' |
item-text | 'checked' | 'unchecked' |
item-description | 'checked' | 'unchecked' |
hidden-input | 'checked' | 'unchecked' |
select-all-trigger | resolveCheckedState(value, prop('itemValues') ?? []) |
以下名称仅用于内部状态机。
状态：idle
事件：VALUE.SET · ITEM.TOGGLE · ALL.TOGGLE · FORM.RESET · PRESS.START · PRESS.END
判据：editable · canPress
connect API
getXxxProps() 返回对应部件的宿主属性。
| 成员 | 类型 | 说明 |
|---|---|---|
value | V[] | |
collection | readonly CheckboxGroupNodeMeta<V>[] | 由 collection 推导的条目元信息，按数据顺序排列；未提供 collection 时为空数组。 |
checkedState | CheckboxGroupCheckedState | |
disabled | boolean | |
readOnly | boolean | |
invalid | boolean | |
required | boolean | |
atMax | boolean | 选中数到了 max：未选的条目改不动。未设 max 时恒为 false。 |
atMin | boolean | 选中数降到 min：已选的条目改不动。未设 min（或为 0）时恒为 false。 |
isChecked | (value: V) => boolean | |
setValue | (next: V[]) => void | 整体替换选中集合。程序化入口，不受 readOnly 拦截。 |
toggleValue | (value: V) => void | 切换某个值；整组禁用或只读时无效。 |
getRootProps | () => T['element'] | |
getLabelProps | () => T['element'] | |
getItemProps | (props: CheckboxGroupItemProps<V>) => T['element'] | |
getIndicatorProps | (props: CheckboxGroupItemProps<V>) => T['element'] | |
getItemTextProps | (props: CheckboxGroupItemProps<V>) => T['element'] | |
getItemDescriptionProps | (props: CheckboxGroupItemProps<V>) => T['element'] | 条目的说明：文案下方一行次级文字，常用在 card 形态里。 |
getHiddenInputProps | (props: CheckboxGroupItemProps<V>) => T['input'] | 条目的表单影子：一份视觉隐藏的原生 checkbox，由条目内部渲染。 |
getSelectAllTriggerProps | () => T['element'] | 全选 / 半选的父复选框。必须写在 root 之内，它依靠祖先链找到本组。 |
无障碍
键盘
规格出处：W3C APG
| 按键 | 生效条件 | 行为 |
|---|---|---|
Tab / Shift+Tab | focus enters or leaves the group | 组内有几个条目就有几个 Tab 停靠点（禁用条目也留一个），容器自己不占位；单选组的"整组一个停靠点"在这里不成立 |
Space | focus on item, group editable and item not disabled | 翻转该条目的选中态；改不动时放行按键给页面滚动 |
Space | focus on select-all-trigger, group editable | 可用条目未全选则一并勾上，已全选则一并取消；禁用条目不受影响 |
Space | held on item / select-all-trigger, group editable and item not disabled | 按住期间该行投影 data-pressed，与指针 :active 同一副按压面（行换面、方框随行换底，不缩放）；抬起或失焦撤下，按住途中整组转入禁用或只读也撤下。role=checkbox 只有 Space 是激活键，Enter 不进按压面；选中与按压互相独立 |
ARIA
以下属性由 connect 生成。
| 部件 | 属性 | 值 |
|---|---|---|
root | aria-label | props.ariaLabel |
root | aria-labelledby | label 部件的 id | undefined |
root | role | 'group' |
item | aria-checked | 'true' | 'false' |
item | aria-disabled | 'true' | 'false' |
item | aria-invalid | 'true' | 'false' |
item | aria-readonly | 'true' | 'false' |
item | role | 'checkbox' |
indicator | aria-hidden | 'true' |
hidden-input | aria-hidden | 'true' |
select-all-trigger | aria-checked | 'true' | 'mixed' | 'false' |
select-all-trigger | aria-disabled | 'false' | 'true' |
select-all-trigger | aria-labelledby | label 部件的 id select-all-trigger 部件的 id | select-all-trigger 部件的 id |
select-all-trigger | aria-readonly | 'true' | 'false' |
select-all-trigger | role | 'checkbox' |
样式参考
皮肤
@xihan-ui/styles/checkbox-group.css 按 [data-scope="checkbox-group"][data-part="root"] 部件选择器书写，发布产物以挂载类 .xh-scope-checkbox-group 代替其中的 data-scope（特异性相同），位于 xihan.components 层。覆盖样式使用 xihan.overrides，部件选择器照常可用。
forced-colors: active 下另有一套规则：颜色交给系统，边框与状态标记改用系统色关键字。
数据属性
由 connect 生成；条件不成立时不输出无值属性。
| 部件 | 属性 | 值 |
|---|---|---|
root | data-disabled | ''（条件成立时才出现） |
root | data-invalid | ''（条件成立时才出现） |
root | data-orientation | props.orientation |
root | data-readonly | ''（条件成立时才出现） |
root | data-required | ''（条件成立时才出现） |
root | data-size | props.size |
root | data-tone | props.tone |
root | data-variant | props.variant |
label | data-required | ''（条件成立时才出现） |
item | data-disabled | ''（条件成立时才出现） |
item | data-pressed | ''（条件成立时才出现） |
item | data-readonly | ''（条件成立时才出现） |
item | data-state | 'checked' | 'unchecked' |
item | data-xh-action-control | '' |
item | data-xh-action-display | 'always' |
item | data-xh-action-profile | 'row' |
item | data-xh-action-size | 'xs' |
item | data-xh-action-variant | 'outline' | 'ghost' |
item | data-xh-choice-card | ''（条件成立时才出现） |
indicator | data-disabled | ''（条件成立时才出现） |
indicator | data-state | 'checked' | 'unchecked' |
indicator | data-xh-check-mark | 'checked' | 'unchecked' |
indicator | data-xh-check-mark-profile | 'box' |
item-text | data-disabled | ''（条件成立时才出现） |
item-text | data-state | 'checked' | 'unchecked' |
item-description | data-disabled | ''（条件成立时才出现） |
item-description | data-state | 'checked' | 'unchecked' |
hidden-input | data-disabled | ''（条件成立时才出现） |
hidden-input | data-state | 'checked' | 'unchecked' |
select-all-trigger | data-disabled | ''（条件成立时才出现） |
select-all-trigger | data-pressed | ''（条件成立时才出现） |
select-all-trigger | data-readonly | ''（条件成立时才出现） |
select-all-trigger | data-state | resolveCheckedState(value, prop('itemValues') ?? []) |
select-all-trigger | data-xh-action-control | '' |
select-all-trigger | data-xh-action-display | 'always' |
select-all-trigger | data-xh-action-profile | 'row' |
select-all-trigger | data-xh-action-size | 'xs' |
select-all-trigger | data-xh-action-variant | 'ghost' |
select-all-trigger | data-xh-check-mark | resolveCheckedState(value, prop('itemValues') ?? []) |
select-all-trigger | data-xh-check-mark-profile | 'row' |
CSS 变量
本组件公开覆盖槽由独立皮肤的实际消费位生成；默认来源、作用部件和状态均与 CSS 同源。
| 变量 | 部件 | CSS 属性 | 状态 | 默认来源 | 说明 |
|---|---|---|---|---|---|
--xh-checkbox-group-card-title-font-weight | itemitem-text | font-weight | xh-choice-card | --xh-text-label-weight | checkbox-group 的 item、item-text 部件 font-weight 覆盖槽。 |
--xh-checkbox-group-gap | root | gap | default | --xh-space-2 | checkbox-group 的 root 部件 gap 覆盖槽。 |
--xh-checkbox-group-icon-size | root | --xh-icon-size | default | --xh-_checkbox-group-glyph | checkbox-group 的 root 部件 --xh-icon-size 覆盖槽。 |
--xh-checkbox-group-indicator-bg | indicatorrootselect-all-trigger | background-color | default | transparent | checkbox-group 的 indicator、root、select-all-trigger 部件 background-color 覆盖槽。 |
--xh-checkbox-group-indicator-bg-checked | indicatorselect-all-trigger | background-color | is([data-state='checked'], [data-state='indeterminate'])state=checkedstate=indeterminate | --xh-_checkbox-group-accent | checkbox-group 的 indicator、select-all-trigger 部件 background-color 覆盖槽。 |
--xh-checkbox-group-indicator-bg-checked-pressed | indicatoritemrootselect-all-trigger | background-color | disabledis(:active, [data-pressed])is([data-state='checked'], [data-state='indeterminate'])not([data-disabled])not([data-readonly])pressedreadonlystate=checkedstate=indeterminate | --xh-_tone-active | checkbox-group 的 indicator、item、root、select-all-trigger 部件 background-color 覆盖槽。 |
--xh-checkbox-group-indicator-bg-disabled | indicatoritemrootselect-all-trigger | background-color | disabled | --xh-bg-subtle | checkbox-group 的 indicator、item、root、select-all-trigger 部件 background-color 覆盖槽。 |
--xh-checkbox-group-indicator-bg-pressed | indicatoritemrootselect-all-trigger | background-color | disabledis(:active, [data-pressed])not([data-disabled])not([data-readonly])pressedreadonly | --xh-_checkbox-group-host-bg-pressed | checkbox-group 的 indicator、item、root、select-all-trigger 部件 background-color 覆盖槽。 |
--xh-checkbox-group-indicator-border | indicatorselect-all-trigger | border | default | --xh-border-strong | checkbox-group 的 indicator、select-all-trigger 部件 border 覆盖槽。 |
--xh-checkbox-group-indicator-border-checked | indicatorselect-all-trigger | border-color | is([data-state='checked'], [data-state='indeterminate'])state=checkedstate=indeterminate | --xh-_checkbox-group-accent | checkbox-group 的 indicator、select-all-trigger 部件 border-color 覆盖槽。 |
--xh-checkbox-group-indicator-border-disabled | indicatoritemrootselect-all-trigger | border-color | disabled | --xh-border-default | checkbox-group 的 indicator、item、root、select-all-trigger 部件 border-color 覆盖槽。 |
--xh-checkbox-group-indicator-border-hover | indicatoritemrootselect-all-trigger | border-color | @media (hover: hover)disabledhoverinvalidnot([data-disabled])not([data-invalid])not([data-readonly])not([data-state='checked'])not([data-state='indeterminate'])readonlystate=checkedstate=indeterminate | --xh-border-control-hover | checkbox-group 的 indicator、item、root、select-all-trigger 部件 border-color 覆盖槽。 |
--xh-checkbox-group-indicator-border-invalid | indicatorroot | border-color | invalid | --xh-border-invalid | checkbox-group 的 indicator、root 部件 border-color 覆盖槽。 |
--xh-checkbox-group-indicator-fg | indicatorselect-all-trigger | --xh-check-mark-fgcolor | default | --xh-_checkbox-group-on-accent | checkbox-group 的 indicator、select-all-trigger 部件 --xh-check-mark-fg、color 覆盖槽。 |
--xh-checkbox-group-indicator-fg-disabled | indicatoritemrootselect-all-trigger | --xh-check-mark-fgcolor | disabled | --xh-fg-disabled | checkbox-group 的 indicator、item、root、select-all-trigger 部件 --xh-check-mark-fg、color 覆盖槽。 |
--xh-checkbox-group-indicator-font-size | indicatorselect-all-trigger | font-size | default | --xh-_checkbox-group-glyph | checkbox-group 的 indicator、select-all-trigger 部件 font-size 覆盖槽。 |
--xh-checkbox-group-indicator-radius | indicatorselect-all-trigger | border-radius | default | --xh-shape-inset | checkbox-group 的 indicator、select-all-trigger 部件 border-radius 覆盖槽。 |
--xh-checkbox-group-indicator-shadow | indicatorselect-all-trigger | box-shadow | default | none | checkbox-group 的 indicator、select-all-trigger 部件 box-shadow 覆盖槽。 |
--xh-checkbox-group-indicator-size | indicatorselect-all-trigger | --xh-check-mark-box-sizeblock-sizeinline-size | default | --xh-_checkbox-group-box | checkbox-group 的 indicator、select-all-trigger 部件 --xh-check-mark-box-size、block-size、inline-size 覆盖槽。 |
--xh-checkbox-group-item-bg-hover | item | background-color | disabledhoverloadingnot([data-disabled])not([data-loading]) | --xh-bg-subtle | checkbox-group 的 item 部件 background-color 覆盖槽。 |
--xh-checkbox-group-item-bg-pressed | item | background-color | disabledis(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])pressed | --xh-bg-subtle-hover | checkbox-group 的 item 部件 background-color 覆盖槽。 |
--xh-checkbox-group-item-description-fg | item-description | color | default | --xh-fg-muted | checkbox-group 的 item-description 部件 color 覆盖槽。 |
--xh-checkbox-group-item-description-fg-disabled | itemitem-description | color | disabled | --xh-fg-disabled | checkbox-group 的 item、item-description 部件 color 覆盖槽。 |
--xh-checkbox-group-item-description-font-size | item-description | font-size | default | --xh-text-secondary-size | checkbox-group 的 item-description 部件 font-size 覆盖槽。 |
--xh-checkbox-group-item-fg | item | color | defaultdisabledfocus-visiblehoveris(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])pressed | --xh-fg-default | checkbox-group 的 item 部件 color 覆盖槽。 |
--xh-checkbox-group-item-fg-disabled | item | color | disabled | --xh-fg-disabled | checkbox-group 的 item 部件 color 覆盖槽。 |
--xh-checkbox-group-item-font-size | item | font-size | default | --xh-_checkbox-group-font-size | checkbox-group 的 item 部件 font-size 覆盖槽。 |
--xh-checkbox-group-item-gap | item | gap | default | --xh-_checkbox-group-gap | checkbox-group 的 item 部件 gap 覆盖槽。 |
--xh-checkbox-group-item-radius | item | border-radius | default | --xh-shape-control | checkbox-group 的 item 部件 border-radius 覆盖槽。 |
--xh-checkbox-group-item-row-gap | item | row-gap | has(> [data-scope='checkbox-group'][data-part='item-description'])not([data-xh-choice-card])xh-choice-card | --xh-space-1 | checkbox-group 的 item 部件 row-gap 覆盖槽。 |
--xh-checkbox-group-label-fg | label | color | default | --xh-fg-muted | checkbox-group 的 label 部件 color 覆盖槽。 |
--xh-checkbox-group-label-fg-disabled | labelroot | color | disabled | --xh-fg-subtle | checkbox-group 的 label、root 部件 color 覆盖槽。 |
--xh-checkbox-group-label-font-size | label | font-size | default | --xh-text-label-size | checkbox-group 的 label 部件 font-size 覆盖槽。 |
--xh-checkbox-group-label-font-weight | label | font-weight | default | --xh-text-label-weight | checkbox-group 的 label 部件 font-weight 覆盖槽。 |
--xh-checkbox-group-select-all-trigger-bg-hover | select-all-trigger | background-color | disabledhoverloadingnot([data-disabled])not([data-loading]) | --xh-bg-subtle | checkbox-group 的 select-all-trigger 部件 background-color 覆盖槽。 |
--xh-checkbox-group-select-all-trigger-bg-pressed | select-all-trigger | background-color | disabledis(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])pressed | --xh-bg-subtle-hover | checkbox-group 的 select-all-trigger 部件 background-color 覆盖槽。 |
--xh-checkbox-group-select-all-trigger-fg | select-all-trigger | color | defaultdisabledfocus-visiblehoveris(:active, [data-pressed])loadingnot([data-disabled])not([data-loading])pressed | --xh-fg-default | checkbox-group 的 select-all-trigger 部件 color 覆盖槽。 |
--xh-checkbox-group-select-all-trigger-fg-disabled | select-all-trigger | color | disabled | --xh-fg-disabled | checkbox-group 的 select-all-trigger 部件 color 覆盖槽。 |
--xh-checkbox-group-select-all-trigger-font-size | select-all-trigger | font-size | default | --xh-_checkbox-group-font-size | checkbox-group 的 select-all-trigger 部件 font-size 覆盖槽。 |
--xh-checkbox-group-select-all-trigger-font-weight | select-all-trigger | font-weight | default | --xh-font-weight-medium | checkbox-group 的 select-all-trigger 部件 font-weight 覆盖槽。 |
--xh-checkbox-group-select-all-trigger-gap | select-all-trigger | gap | default | --xh-_checkbox-group-gap | checkbox-group 的 select-all-trigger 部件 gap 覆盖槽。 |
--xh-checkbox-group-select-all-trigger-radius | select-all-trigger | border-radius | default | --xh-shape-inset | checkbox-group 的 select-all-trigger 部件 border-radius 覆盖槽。 |
动效
动效角色：按压 · 状态 · 切换 · 出现（见动效规范）。
-webkit-mask-size · background-color · border-color · clip-path · mask-size · opacity 走 transition 过渡。时长与缓动读动效令牌，改令牌即改全局节奏。
系统开启减弱动效时由令牌层统一收敛，皮肤不另作判断。
响应式
皮肤另按输入能力分档：hover: hover · pointer: coarse：同一份皮肤在触屏与带指针的设备上不一样，与视口宽度无关。
RTL
皮肤用逻辑属性排布（inline-start 一族），dir="rtl" 下自动镜像。