# Switch

Turns a setting on or off, taking effect immediately. For choices that apply when a form is submitted, use [Checkbox](/components/checkbox.md).

```tsx
// demo.tsx
import {SelectionControlAndLabel, Switch} from '@earendil-works/elanor-react';

export default function SwitchDemo() {
  return (
    <SelectionControlAndLabel
      control={
        <Switch.Root defaultChecked>
          <Switch.Thumb />
        </Switch.Root>
      }
    >
      Desktop notifications
    </SelectionControlAndLabel>
  );
}
```

## Usage

```tsx
import {SelectionControlAndLabel, Switch} from '@earendil-works/elanor-react';

<SelectionControlAndLabel
  control={
    <Switch.Root>
      <Switch.Thumb />
    </Switch.Root>
  }
>
  Desktop notifications
</SelectionControlAndLabel>;
```

## Disabled

```tsx
// disabled.tsx
import {SelectionControlAndLabel, Switch} from '@earendil-works/elanor-react';

export default function SwitchDisabled() {
  return (
    <SelectionControlAndLabel
      control={
        <Switch.Root disabled>
          <Switch.Thumb />
        </Switch.Root>
      }
    >
      Single sign-on (Enterprise only)
    </SelectionControlAndLabel>
  );
}
```

## API

### `Switch.Root`

Accepts Base UI [`Switch.Root`](https://base-ui.com/react/components/switch.md) props.

### `Switch.Thumb`

Accepts Base UI [`Switch.Thumb`](https://base-ui.com/react/components/switch.md) props.