Semi Design 复选框组件(Checkbox)完全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00744/article/details/148419030

Semi Design 复选框组件(Checkbox)完全指南

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design

什么是复选框(Checkbox)

复选框(Checkbox)是Web界面中常见的表单控件，允许用户从一组选项中选择一个或多个项目。在Semi Design组件库中，Checkbox组件提供了丰富的功能和灵活的配置选项，可以帮助开发者快速构建符合设计规范的选择交互。

基本使用

单个复选框

最基本的复选框使用方式非常简单：

import { Checkbox } from '@douyinfe/semi-ui';

<Checkbox onChange={(e) => console.log(e)}>选项标签</Checkbox>

defaultChecked：设置默认选中状态
checked：控制选中状态(受控模式)
onChange：状态变化时的回调函数

复选框组

当需要一组相关联的复选框时，可以使用CheckboxGroup：

import { CheckboxGroup } from '@douyinfe/semi-ui';

<CheckboxGroup defaultValue={['A', 'B']}>
  <Checkbox value="A">选项A</Checkbox>
  <Checkbox value="B">选项B</Checkbox>
</CheckboxGroup>

进阶功能

禁用状态

通过设置disabled属性可以禁用复选框：

<Checkbox disabled>禁用选项</Checkbox>

辅助文本

使用extra属性可以添加辅助说明文本：

<Checkbox 
  extra="这里是详细的辅助说明文本"
>
  主要选项
</Checkbox>

布局方向

复选框组支持水平和垂直两种布局方式：

<CheckboxGroup direction="horizontal">
  {/* 水平排列的复选框 */}
</CheckboxGroup>

全选功能

实现全选功能时，可以使用indeterminate状态：

const [indeterminate, setIndeterminate] = useState(true);
const [checkAll, setCheckAll] = useState(false);

<Checkbox
  indeterminate={indeterminate}
  checked={checkAll}
  onChange={onCheckAllChange}
>
  全选
</Checkbox>

卡片样式

Semi Design提供了两种卡片样式的复选框：

常规卡片样式(type="card")
纯卡片样式(type="pureCard")

<CheckboxGroup type="card">
  <Checkbox value="1">卡片选项1</Checkbox>
  <Checkbox value="2">卡片选项2</Checkbox>
</CheckboxGroup>

最佳实践

无障碍访问

为没有文本标签的复选框添加aria-label
确保禁用状态正确设置aria-disabled
键盘操作支持(Tab切换、Space选中)

文案规范

选项标签首字母大写
不使用标点符号
保持简洁明了

性能考虑

大量复选框使用时考虑虚拟滚动
复杂表单中合理使用受控/非受控模式

常见问题

Q: 如何在复选框组中实现动态选项？

A: 可以通过options属性传入动态生成的选项数组：

const dynamicOptions = [
  {label: '动态选项1', value: '1'},
  {label: '动态选项2', value: '2'}
];

<CheckboxGroup options={dynamicOptions} />

Q: 如何自定义复选框样式？

A: 可以通过CSS-in-JS方式覆盖默认样式，或者使用Semi Design提供的设计变量进行主题定制。

Q: 复选框组的值如何与表单集成？

A: 可以配合Form组件使用，或者通过onChange事件手动管理状态。

通过本文的介绍，相信您已经对Semi Design中的Checkbox组件有了全面的了解。无论是简单的单个选择还是复杂的选择组场景，Checkbox组件都能提供优雅的解决方案。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考