Skip to content

feat(Checkbox): CheckboxGroup 支持独立按钮风格多选框组 - #4340

Open
xy200303 wants to merge 2 commits into
Tencent:developfrom
xy200303:feat/checkbox-group-button-style
Open

feat(Checkbox): CheckboxGroup 支持独立按钮风格多选框组#4340
xy200303 wants to merge 2 commits into
Tencent:developfrom
xy200303:feat/checkbox-group-button-style

Conversation

@xy200303

Copy link
Copy Markdown

🤔 这个 PR 的性质是?

  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进

🔗 相关 Issue

💡 需求背景和解决方案

权限分配、功能开关等场景需要快速核对多个已选项。本 PR 为 CheckboxGroup 补充按钮风格的组件实现,配合 tdesign-common#2641 的独立按钮样式:每个选项保持独立边框和圆角,选中背景直接落在对应选项上,横向空间不足时自然换行。

#4337 的连体分段方案不同,本方案选项互不共享边框,多个已选项互不影响,增删、重排、换行均不会破坏边框闭合。

最终 API(CheckboxGroup 新增)

属性 类型 默认值 说明
theme checkbox / button checkbox 决定 options 渲染风格,button 时使用按钮风格
variant outline / default-filled / primary-filled default-filled 按钮形态,仅 theme 为 button 生效
size small / medium / large medium 组件尺寸,仅 theme 为 button 生效
direction horizontal / vertical horizontal 按钮排列方式

用法:

<Checkbox.Group theme="button" variant="default-filled" options={options} />

实现说明

  • 新增 Checkbox.Button 组件,基于 common/Check 扩展 checkbox-button 类型,根节点输出 t-checkbox-button,内部元素复用 t-checkbox__former/input/label,与 tdesign-common#2641 的样式选择器对齐
  • 按钮风格相关类名仅在 theme="button" 时输出,不影响默认渲染
  • Checkbox.Button 子节点可被 max / checkAll 逻辑正确识别

验证

  • 新增 10 个按钮风格单测,checkbox 22 个测试全部通过
  • radio 44 个测试全部通过(共用 Check 组件无回归)
  • lint:tsc、eslint、csr/ssr 快照测试通过,已补充 3 个新 demo 的快照

📝 更新日志

  • feat(Checkbox): CheckboxGroup 支持按钮风格多选

☑️ 请求合并前的自查清单

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

- add theme/variant/size/direction API to CheckboxGroup
- options render as independent tag-like buttons when theme is button
- add Checkbox.Button component, reusing t-checkbox inner class names
- support outline, default-filled and primary-filled variants and vertical layout
- related to Tencent/tdesign-common#2562, works with Tencent/tdesign-common#2641
@uyarn

uyarn commented Jul 30, 2026

Copy link
Copy Markdown
Collaborator

/update-common 2641

@uyarn uyarn added the 💭 discussion we are discussing label Jul 30, 2026
@tdesign-bot

Copy link
Copy Markdown
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-react 完成
@tdesign-react/chat 完成

@pkg-pr-new

pkg-pr-new Bot commented Jul 30, 2026

Copy link
Copy Markdown
  • tdesign-react-demo

    npm i https://pkg.pr.new/Tencent/tdesign-react@4340
    
    npm i https://pkg.pr.new/Tencent/tdesign-react/@tdesign-react/chat@4340
    

commit: 47e5b24

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

💭 discussion we are discussing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants