Skip to content

feat(checkbox): 支持独立按钮风格多选框组 #2641

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
xy200303 wants to merge 2 commits into from
Closed

feat(checkbox): 支持独立按钮风格多选框组 #2641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cde20fe
feat(checkbox): 支持独立按钮风格多选框组
xy200303 Jul 21, 2026
6b6f6a5
Merge branch 'develop' into feat/checkbox-group-button-style
xy200303 Jul 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/web/_design/多选框 Checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,12 @@

<hr />

##### 当需要在多个选项中快速识别已选结果时，例如 CRM/OA 系统的权限分配或功能开关配置，可使用按钮风格的多选框组。选中项以填充背景突出，未选中项保持描边或弱背景，方便高频操作。

##### 设计取舍：按钮多选框不采用单选分段控件的连体边框和单一滑块。每个选项都是独立的可选单元，选中背景直接落在对应项上，因此可同时清晰呈现任意多个已选权限；横向空间不足时会自然换行，也不会产生断开的外框或模糊的组边界。

<hr />

### 推荐/慎用示例

##### 当选项较多且字段长度不一时，建议将多选框对齐。
Expand Down
18 changes: 18 additions & 0 deletions docs/web/api/checkbox.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,24 @@ A group of check boxes that are combined according to certain attributes.

{{ group }}

### Button-style Checkbox Groups

Button-style checkbox groups arrange options as independent tag-like buttons horizontally or vertically, wrapping naturally when space is limited. Selected items use a filled background and work well for permission assignment, feature toggles, and other cases where users need to identify multiple selections quickly.

{{ button }}

### Button-style Checkbox Groups in Different Sizes

Button-style checkbox groups are available in large, medium (default), and small sizes.

{{ button-size }}

### Button-style Checkbox Groups in Different Variants

Button-style checkbox groups support outline, filled (default), and primary-filled variants, as well as vertical layout.

{{ button-variant }}

### Controlled Class Checkbox

The checkbox supports controlled and uncontrolled usage.
Expand Down
18 changes: 18 additions & 0 deletions docs/web/api/checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,24 @@ spline: form

{{ group }}

### 按钮风格的多选框组

多选框组支持按钮风格，选项以独立标签式按钮横向或纵向排列，并可在空间不足时自然换行。选中项使用填充背景突出，适合权限分配、功能开关等需要快速识别多选结果的场景。

{{ button }}

### 不同尺寸的按钮多选框组

提供大、中（默认）、小三种按钮风格的多选框组。

{{ button-size }}

### 不同形态的按钮多选框组

提供描边、填充（默认）、主色填充三种形态，并支持纵向排列。

{{ button-variant }}

### 受控类多选框

多选框支持受控和非受控使用方式。
Expand Down
12 changes: 12 additions & 0 deletions docs/web/design/checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,18 @@

<hr />

### 按钮风格的多选框组

##### 当需要在多个选项中快速识别已选结果时，例如 CRM/OA 系统的权限分配或功能开关配置，可使用按钮风格的多选框组。选中项以填充背景突出，未选中项保持描边或弱背景，方便高频操作。

##### 按钮风格提供描边、填充和主色填充三种形态。选项较多时可采用纵向排列，以保持清晰的扫描路径。

##### 设计取舍：按钮多选框不采用单选分段控件的连体边框和单一滑块。每个选项都是独立的可选单元，选中背景直接落在对应项上，因此可同时清晰呈现任意多个已选权限；横向空间不足时会自然换行，也不会产生断开的外框或模糊的组边界。

##### 描边形态使用品牌色描边与浅色选中背景，填充形态使用弱容器底与独立选中块，主色填充用于需要更强确认反馈的操作。三个形态均保留焦点、禁用和表单校验状态。

<hr />

### 推荐/慎用示例

##### 当选项较多且字段长度不一时，建议将多选框对齐。
Expand Down
187 changes: 187 additions & 0 deletions style/web/components/checkbox/_index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,133 @@
display: inline-flex;
flex-wrap: wrap;
gap: @checkbox-group-gap;

&.@{checkbox-cls}-group__outline,
&.@{checkbox-cls}-group--filled,
&.@{checkbox-cls}-group--primary-filled {
align-items: center;
width: fit-content;
max-width: 100%;
border-radius: @border-radius-default;
}

&.@{checkbox-cls}-group__outline {
gap: @checkbox-button-outline-gap;

.@{checkbox-button-cls} {
&.@{prefix}-is-checked,
&.@{prefix}-is-indeterminate {
color: @checkbox-button-color-outline-checked;
border-color: @checkbox-button-border-color-checked;
background-color: @checkbox-button-bg-color-outline-checked;
}

&.@{prefix}-is-disabled {
&.@{prefix}-is-checked,
&.@{prefix}-is-indeterminate {
color: @checkbox-button-color-disabled-checked;
border-color: @brand-color-disabled;
background-color: @checkbox-button-bg-color-outline-disabled-checked;
}
}
}
}

&.@{checkbox-cls}-group--vertical {
flex-direction: column;
align-items: stretch;

.@{checkbox-button-cls} {
width: 100%;
}
}

&.@{checkbox-cls}-group--filled,
&.@{checkbox-cls}-group--primary-filled {
gap: @checkbox-button-group-gap;
padding: @checkbox-button-group-padding;
background-color: @checkbox-button-group-bg-color-filled;

.@{checkbox-button-cls} {
border: 0;
border-radius: @checkbox-button-border-radius;
color: @checkbox-button-color-filled;
background-color: transparent;

&:hover {
color: @checkbox-button-color-filled-hover;
}

&.@{prefix}-is-checked,
&.@{prefix}-is-indeterminate {
color: @checkbox-button-color-filled-checked;
background-color: @checkbox-button-bg-color-filled-checked;
}

&.@{prefix}-is-disabled {
background-color: transparent;

&.@{prefix}-is-checked,
&.@{prefix}-is-indeterminate {
color: @checkbox-button-color-disabled-checked;
background-color: @checkbox-button-bg-color-filled-disabled-checked;
}
}
}
}

&.@{checkbox-cls}-group--primary-filled {
.@{checkbox-button-cls} {
&.@{prefix}-is-checked,
&.@{prefix}-is-indeterminate {
color: @checkbox-button-color-primary-filled-checked;
background-color: @checkbox-button-bg-color-primary-filled-checked;
}

&.@{prefix}-is-disabled {
&.@{prefix}-is-checked,
&.@{prefix}-is-indeterminate {
background-color: @checkbox-button-bg-color-primary-filled-disabled-checked;
}
}
}
}

&.@{prefix}-size-s {
.@{checkbox-button-cls} {
height: @checkbox-button-height-small;
padding: @checkbox-button-padding-small;
font: @checkbox-button-font-small;
}

&.@{checkbox-cls}-group__outline .@{checkbox-button-cls} {
height: @checkbox-button-outline-height-small;
}
}

&.@{prefix}-size-m {
.@{checkbox-button-cls} {
height: @checkbox-button-height-medium;
padding: @checkbox-button-padding-medium;
font: @checkbox-button-font-medium;
}

&.@{checkbox-cls}-group__outline .@{checkbox-button-cls} {
height: @checkbox-button-outline-height-medium;
}
}

&.@{prefix}-size-l {
.@{checkbox-button-cls} {
height: @checkbox-button-height-large;
padding: @checkbox-button-padding-large;
font: @checkbox-button-font-large;
}

&.@{checkbox-cls}-group__outline .@{checkbox-button-cls} {
height: @checkbox-button-outline-height-large;
}
}
}

.@{checkbox-cls} {
Expand Down Expand Up @@ -153,6 +280,66 @@
}
}

.@{checkbox-button-cls} {
.reset;

position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: @checkbox-button-height-medium;
padding: @checkbox-button-padding-medium;
cursor: pointer;
border: @checkbox-button-border;
border-color: @checkbox-button-border-color-default;
border-radius: @checkbox-button-border-radius;
color: @checkbox-button-color-outline;
background-color: @checkbox-button-bg-color-outline;
font: @checkbox-button-font-medium;
white-space: nowrap;
transition: @checkbox-button-transition;

& + .@{checkbox-button-cls} {
margin-left: 0;
}

.@{checkbox-cls}__former {
.input-visually-hidden();
}

.@{checkbox-cls}__input {
display: none;
}

.@{checkbox-cls}__label {
margin-left: 0;
font: inherit;
}

&:hover {
color: @checkbox-button-color-outline-hover;
border-color: @checkbox-button-border-color-hover;
background-color: @checkbox-button-bg-color-outline-hover;
}

&.@{prefix}-is-disabled {
cursor: not-allowed;
color: @checkbox-button-color-disabled;
background-color: @checkbox-button-bg-color-disabled;

&:hover {
color: @checkbox-button-color-disabled;
border-color: @checkbox-button-border-color-default;
background-color: @checkbox-button-bg-color-disabled;
}
}
}

.@{prefix}-checkbox:focus-visible {
.tab-focus-style-rect();
}

.@{checkbox-button-cls}:focus-visible {
.tab-focus-style-rect();
}
49 changes: 49 additions & 0 deletions style/web/components/checkbox/_var.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
// 如：@button-line-height-s

@checkbox-cls: ~'@{prefix}-checkbox';
@checkbox-button-cls: ~'@{prefix}-checkbox-button';

// 颜色
@checkbox-border-color: @border-level-2-color;
Expand All @@ -32,10 +33,43 @@

@checkbox-label-color: @text-color-primary;

// button checkbox
@checkbox-button-border-color-default: @border-level-2-color;
@checkbox-button-border-color-hover: @brand-color-hover;
@checkbox-button-border-color-checked: @brand-color;
@checkbox-button-color-outline: @text-color-primary;
@checkbox-button-color-outline-hover: @brand-color-hover;
@checkbox-button-color-outline-checked: @brand-color;
@checkbox-button-bg-color-outline: @bg-color-specialcomponent;
@checkbox-button-bg-color-outline-hover: @bg-color-container-hover;
@checkbox-button-bg-color-outline-checked: @brand-color-light;

@checkbox-button-group-bg-color-filled: @bg-color-component;
@checkbox-button-color-filled: @text-color-secondary;
@checkbox-button-color-filled-hover: @text-color-primary;
@checkbox-button-color-filled-checked: @text-color-primary;
@checkbox-button-bg-color-filled-checked: @bg-color-container-select;
@checkbox-button-color-primary-filled-checked: @text-color-anti;
@checkbox-button-bg-color-primary-filled-checked: @brand-color;

@checkbox-button-color-disabled: @text-color-disabled;
@checkbox-button-color-disabled-checked: @text-color-disabled;
@checkbox-button-bg-color-disabled: @bg-color-component-disabled;
@checkbox-button-bg-color-outline-disabled-checked: @bg-color-specialcomponent;
@checkbox-button-bg-color-filled-disabled-checked: @bg-color-component-disabled;
@checkbox-button-bg-color-primary-filled-disabled-checked: @brand-color-disabled;

// 尺寸
@checkbox-size: 16px;
@checkbox-border-radius: @border-radius-default;
@checkbox-margin-right: @comp-margin-s;
@checkbox-button-border-radius: @border-radius-small;
@checkbox-button-outline-height-small: @comp-size-xs;
@checkbox-button-outline-height-medium: @comp-size-m;
@checkbox-button-outline-height-large: @comp-size-xl;
@checkbox-button-height-small: calc(@comp-size-xs - (@comp-paddingTB-xxs * 2));
@checkbox-button-height-medium: calc(@comp-size-m - (@comp-paddingTB-xxs * 2));
@checkbox-button-height-large: calc(@comp-size-xl - (@comp-paddingTB-xxs * 2));

@checkbox-check-width: 5px;
@checkbox-check-height: 9px;
Expand All @@ -48,11 +82,26 @@

// 字号
@checkbox-font: @font-body-medium;
@checkbox-button-font-small: @font-body-small;
@checkbox-button-font-medium: @font-body-medium;
@checkbox-button-font-large: @font-body-large;

// padding
@checkbox-input-label-spacer: @spacer;
@checkbox-button-padding-small: 0 @comp-paddingLR-s;
@checkbox-button-padding-medium: @comp-paddingTB-xs @comp-paddingLR-l;
@checkbox-button-padding-large: @comp-paddingTB-s @comp-paddingLR-xl;
@checkbox-button-border: 1px solid;

// 组合复选框margin
@checkbox-group-gap: @spacer-2;
@checkbox-button-outline-gap: @comp-margin-s;
@checkbox-button-group-gap: @comp-margin-xxs;
@checkbox-button-group-padding: @comp-paddingTB-xxs @comp-paddingLR-xxs;
// 单个复选框margin
@checkbox-margin: inherit;

@checkbox-button-transition:
color @anim-duration-base @anim-time-fn-ease-out,
border-color @anim-duration-base @anim-time-fn-ease-out,
background-color @anim-duration-base @anim-time-fn-ease-out;
1 change: 1 addition & 0 deletions style/web/components/form/_mixin.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
.@{prefix}-input,
.@{prefix}-select,
.@{prefix}-radio-button,
.@{prefix}-checkbox-button,
.@{prefix}-cascader,
.@{prefix}-range-input,
.@{prefix}-textarea__inner {
Expand Down