## 简介
开关常用于需要进行两种状态切换的场景，适用于语义非常明确的场景，例如代表“是”或“否”。
## 示例
### 尺寸
```tsx
import React from 'react';
import { Switch, Grid } from '@alicloud/console-components';
const { Row, Col } = Grid;
export default () => {
return (
默认 24px
小号 24px
);
};
export const meta = {
title: '尺寸',
describe: '',
};
```
### 基础形态
```tsx
import React from 'react';
import { Switch, Grid } from '@alicloud/console-components';
const { Row, Col } = Grid;
export default () => {
return (
);
};
export const meta = {
title: '文字',
describe: '',
};
```
## API
### Switch
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
| defaultChecked | 开关是否打开默认值 (非受控) | boolean | false | |
| checked | 开关是否打开（受控） | boolean | - | |
| onChange | 开关状态改变时事件
**签名**:
**参数**:
*checked*: 是否打开 | (
checked: boolean,
e: React.MouseEvent\ | React.KeyboardEvent\
) => void | - | |
| size | switch 的尺寸 | 'medium' | 'small' | 'medium' | |
| loading | 加载状态 | boolean | false | |
| disabled | 表示开关被禁用 | boolean | false | |
| autoWidth | 宽度根据内容自适应 | boolean | false | |
| isPreview | 是否预览模式 | boolean | false | |
| renderPreview | 自定义预览态模式下渲染的内容
**签名**:
**参数**:
*checked*: 是否打开
*props*: 组件参数对象
**返回值**:
预览模式下的渲染内容 | (checked: boolean, props: SwitchProps) => React.ReactNode | - | |
| checkedChildren | 打开时的内容 | React.ReactNode | - | |
| unCheckedChildren | 关闭时的内容 | React.ReactNode | - | |
| onClick | 鼠标点击事件 | (e: React.MouseEvent\ | React.KeyboardEvent\) => void | - | |
| onKeyDown | 键盘按键事件 | (e: React.KeyboardEvent\) => void | - | |
## 无障碍键盘操作指南
| 按键 | 说明 |
| :---- | :----------- |
| Enter | 切换选中状态 |
| SPACE | 切换选中状态 |
## 更多示例
```tsx
```
```tsx
```
```tsx
```