开关 Switch

Switch 组件用于在两个状态之间进行切换，常用于设置选项的开启或关闭。

何时使用

• 需要在两个互斥状态之间切换时
• 表单中需要用户进行布尔值选择时
• 快速开关某个功能或设置时

示例

基础用法

最简单的 Switch 组件使用方式。

尺寸

Switch 组件支持三种尺寸。

变种

Switch 组件支持多种变种样式。

状态

Switch 组件支持多种状态。

自定义颜色

可以自定义开关的背景颜色。

交互式示例

Switch 组件支持受控模式。

所有尺寸和变种

展示所有尺寸和变种的组合。

非受控模式

使用 defaultChecked 属性的非受控模式。

API

Switch Props

参数	说明	类型	默认值
checked	是否开启（受控模式）	boolean	-
defaultChecked	默认是否开启（非受控模式）	boolean	-
disabled	是否禁用	boolean	false
size	尺寸	'default' | 'small' | 'mini'	'default'
variant	变种	'default' | 'primary' | 'secondary'	'default'
checkedColor	自定义开启时的颜色	string	-
uncheckedColor	自定义关闭时的颜色	string	-
onChange	状态改变时的回调	(checked: boolean, e: ChangeEvent<HTMLInputElement>) => void	-
className	自定义类名	string	-
id	自定义 ID	string	-

注意事项

1. Switch 组件用于在两个状态之间进行切换
2. 通过 checked 属性控制开关状态（受控模式）
3. 通过 defaultChecked 属性设置默认状态（非受控模式）
4. 通过 size 属性设置尺寸：
   • 'default'：默认尺寸（84 × 40）
   • 'small'：小尺寸（62 × 30）
   • 'mini'：迷你尺寸（42 × 20）
5. 通过 variant 属性设置变种：
   • 'default'：默认变种
   • 'primary'：主色调变种
   • 'secondary'：次色调变种
6. 通过 checkedColor 和 uncheckedColor 属性可以自定义开关的颜色
7. 在受控模式下，需要同时提供 checked 和 onChange 属性
8. 在非受控模式下，可以使用 defaultChecked 属性设置初始状态
9. Switch 组件支持键盘操作（Tab 键聚焦，空格键切换）
10. 在暗色模式下，Switch 组件会自动适配主题颜色