# Switch

- Page: https://jiguang132.com/resources/arco-design/docs/switch
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Mutually exclusive operation controls, users can turn on or turn off a certain function.

## Install

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

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage.
- **Type**: There are three types of switches to choose from.
- **Disabled**: Set `Switch` to be disabled by `disabled`.
- **Size**: You can get switches of different sizes by specifying `size`.
- **Customize text**: Customize the text or icon to be displayed when the switch is turned on (off).
- **With Icon**: Customize the icon displayed on the switch button.
- **Loading**: The `Switch` is in the loading state and cannot be clicked.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Switch

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|checked|To set checked|boolean |`-`|
|defaultChecked|To set default checked|boolean |`-`|
|disabled|Whether to disable|boolean |`-`|
|loading|Loading state|boolean |`-`|
|size|The size of the switch|'small' \| 'default' |`-`|
|type|Three style types|'circle' \| 'round' \| 'line' |`circle`|
|checkedIcon|The icon displayed on the button when the switch is turned on|ReactNode |`-`|
|checkedText|The text when the switch is turned on, the small size does not work.|ReactNode |`-`|
|uncheckedIcon|The icon displayed on the button when the switch is off|ReactNode |`-`|
|uncheckedText|The text when the switch is turned off, the small size does not work.|ReactNode |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|
|onChange|Callback when click|(value: boolean, event) => void |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt