# 开关 Switch

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/switch
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

互斥性的操作控件，用户可打开或关闭某个功能。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：最基础的应用。
- **不同类型**：有三种类型的开关可供选择。
- **禁用状态**：通过 `disabled` 设置 `Switch` 为禁用状态。
- **不同尺寸的开关**：通过指定 `size` 可以得到不同尺寸的开关。
- **自定义文案**：自定义开关打开（关闭）时需要显示的文字或者图标。
- **带图标的开关**：自定义开关按钮上显示的图标。
- **加载中**：开关处于加载中状态，不可点击。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Switch

|参数名|描述|类型|默认值|
|---|---|---|---|
|checked|开关是否打开|boolean |`-`|
|defaultChecked|默认是否选中|boolean |`-`|
|disabled|是否禁用|boolean |`-`|
|loading|加载中状态|boolean |`-`|
|size|开关的尺寸，有 `small` 和 `default` 可供选择。|'small' \| 'default' |`-`|
|type|三种样式类型|'circle' \| 'round' \| 'line' |`circle`|
|checkedIcon|开关打开时，按钮上显示的图标|ReactNode |`-`|
|checkedText|开关打开时的文案，small 尺寸不生效。|ReactNode |`-`|
|uncheckedIcon|开关关闭时，按钮上显示的图标|ReactNode |`-`|
|uncheckedText|开关关闭时的文案，small 尺寸不生效。|ReactNode |`-`|
|className|节点类名|string \| string[] |`-`|
|style|节点样式|CSSProperties |`-`|
|onChange|点击开关的回调|(value: boolean, event) => void |`-`|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt