# Switch

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/switch
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

switch selector.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

switch selector.

## When to Use

- When it is necessary to represent a switch state/switch between two states.
- The difference from checkbox is that switching switch will directly trigger state change, while checkbox is generally used for state marking and needs to cooperate with submit operation.

## Demos

## Switch

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| beforeChange（deprecated） | Execute before change （Deprecated, recommend using the `onChange` attribute.） | `(val: boolean) => Promise<void>` | - |
| checked | Specify whether it is currently opened | `boolean` | `false` |
| checkedText | Selected text | `ReactNode` | - |
| defaultChecked | Whether to open initially | `boolean` | `false` |
| disabled | Disabled status | `boolean` | `false` |
| loading | Loading status | `boolean` | `false` |
| onChange | The callback function when changing, when the Promise is returned, the loading status will be displayed automatically | `(val: boolean) => void \| Promise<void>` | - |
| uncheckedText | Non-selected text | `ReactNode` | - |

### CSS Variables

| Name            | Description  | Default                    |
| --------------- | ------------ | -------------------------- |
| --border-width  | Border width | `2px`                      |
| --checked-color | Filled color | `var(--adm-color-primary)` |
| --height        | Height       | `31px`                     |
| --width         | Width        | `51px`                     |

## FAQ

### How to handle exceptions in async `onChange`?

The `onChange` event supports returning a Promise, when the Promise starts, the Switch will automatically enter the loading state, and when the Promise completes or fails, the Switch will automatically exit the loading state. In general, this satisfies the needs of most projects.

But when Promise fails, Switch will not eat the error, but will re-throw the error object. This is the expected behavior. If you want to intercept some errors yourself and avoid them being thrown, you can use `try/ catch` wraps the processing logic in `onChange`, for example:

```tsx
async function onChange(val: boolean) {
  try {
    await doSomething();
  } catch (e) {
    // handle or ignore error
  }
}
```

---

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