---
title: Switch - 开关
order: 6
path: /Switch
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 3
  title: 数据录入
  path: /dataInput
---

用于两个互斥选项，用来打开或关闭选项的选择控件。

## 基础开关

不带描述，最基础的开关。

<code src="./demos/base.tsx" background="#fff" height="400px"/>

## 带描述的开关

开关内部带有文字或图标等描述，含义对应开关当前状态，切换时文字同步切换。视觉上更加醒目，用于需要描述当前开关对应状态及含义，更直观且方便用户理解。

<code src="./demos/detail.tsx" background="#fff" height="400px"/>

## 不同类型的开关

有三种类型的开关可供选择。

<code src="./demos/type.tsx" background="#fff" height="400px"/>

## 不同状态的开关

提供 normal、loading 和 disabled 3 种状态的开关。根据不同场景设置对应状态。

<code src="./demos/status.tsx" background="#fff" height="400px"/>

## 不同大小的开关

提供大、中（默认）、小三种尺寸。

<code src="./demos/size.tsx" background="#fff" height="400px"/>

## API

| 参数              | 说明                                        | 类型                                     | 默认值    |
| ----------------- | ------------------------------------------- | ---------------------------------------- | --------- |
| autoFocus         | 组件自动获取焦点                            | boolean                                  | false     |
| checked           | 指定当前是否选中                            | boolean                                  | false     |
| checkedChildren   | 选中时的内容                                | ReactNode                                | -         |
| className         | Switch 器类名                               | string                                   | -         |
| defaultChecked    | 初始是否选中                                | boolean                                  | false     |
| disabled          | 是否禁用                                    | boolean                                  | false     |
| loading           | 加载中的开关                                | boolean                                  | false     |
| size              | 开关大小，可选值：`large` `default` `small` | string                                   | `default` |
| unCheckedChildren | 非选中时的内容                              | ReactNode                                | -         |
| onChange          | 变化时回调函数                              | function(checked: boolean, event: Event) | -         |
| onClick           | 点击时回调函数                              | function(checked: boolean, event: Event) | -         |
| type              | 开关类型                                    | `round` `rect` `line`                    | `round`   |

## 方法

| 名称    | 描述     |
| ------- | -------- |
| blur()  | 移除焦点 |
| focus() | 获取焦点 |