Switch
Mutually exclusive operation controls, users can turn on or turn off a certain function.
Install
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
Switchto be disabled bydisabled. - 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
Switchis 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 | - |