> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/switch.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Switch

Turn a setting on or off.

## Examples

Read event.target.checked in onChange. Loading preserves children and prevents interaction. Give the control a text label or aria-label. Native name, value and required properties support form submission.


Enable notificationsAutosaveLockedSaving settings

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/switch/basic.tsx"
import { Space, Switch } from '@ifhover/leaf-ui';

export function SwitchBasic() {
  return (
    <Space wrap>
      <Switch defaultChecked>Enable notifications</Switch>
      <Switch>Autosave</Switch>
      <Switch disabled defaultChecked>
        Locked
      </Switch>
      <Switch loading>Saving settings</Switch>
    </Space>
  );
}
```

Expand code


Receive emailEmail notifications enabled

SmallDefaultLarge

controlled.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/switch/controlled.tsx"
import { Flex, Space, Switch, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function SwitchControlled() {
  const [checked, setChecked] = useState(true);
  return (
    <Space direction="vertical" align="stretch">
      <Switch checked={checked} onChange={(event) => setChecked(event.target.checked)}>
        Receive email
      </Switch>
      <Text tone="muted" aria-live="polite">
        {checked ? 'Email notifications enabled' : 'Email notifications disabled'}
      </Text>
      <Flex gap="md" align="center" wrap justify="center">
        <Switch size="sm" defaultChecked>
          Small
        </Switch>
        <Switch defaultChecked>Default</Switch>
        <Switch size="lg" defaultChecked>
          Large
        </Switch>
      </Flex>
    </Space>
  );
}
```

Expand code

## Switch API

| Property                     | Type                                   | Default | Description                                      |
| ---------------------------- | -------------------------------------- | ------- | ------------------------------------------------ |
| `checked` / `defaultChecked` | `boolean`                              | —       | Controlled checked state / initial checked state |
| `onChange`                   | `ChangeEventHandler<HTMLInputElement>` | —       | Read event.target.checked                        |
| `size`                       | `'sm' \| 'md' \| 'lg'`                 | `'md'`  | Control size                                     |
| `loading`                    | `boolean`                              | `false` | Show loading and disable interaction             |
| `disabled`                   | `boolean`                              | `false` | Disable interaction                              |
| `children`                   | `ReactNode`                            | —       | Clickable text label                             |
| `ref`                        | `Ref<HTMLInputElement>`                | —       | DOM reference                                    |

## Types

Import SwitchProps to describe component props. Option types in the API table link to their detailed fields above.

```ts
import type { SwitchProps } from '@ifhover/leaf-ui';
```

## Forms and localization

Use name to include values in FormData. Uncontrolled fields follow form reset; reset controlled values in application state. Place controls in [FormField](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/form.md#formfield-api) for labels, help and errors. [ConfigProvider](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/config-provider.md) supplies regional themes and translated built-in UI. Application labels and options are your responsibility.