upstream-twenty/packages/twenty-docs/ui/primitives/input/switch.mdx

---
title: Switch
description: A labeled on or off control with controlled and uncontrolled state.
---

import { StoryEmbed } from '/snippets/ui/StoryEmbed.mdx';

import SwitchReference from '/snippets/ui/generated/input/switch.mdx';

Use `Switch` for an on or off preference. Give the control a visible label or an accessible name.

<StoryEmbed
  storyId="ui-input-switch-switch--default"
  title="Switch example"
  height={240}
/>

## Uncontrolled state

Use `defaultChecked` to set the initial checked state. The switch owns subsequent changes.

```tsx
import { Switch } from 'twenty-ui/primitives/input';

export const NotificationsPreference = () => (
  <label>
    <Switch name="notifications" defaultChecked />
    Email notifications
  </label>
);
```

## Controlled state

Pass `checked` and update it with `onCheckedChange` to own the same preference in React state.

```tsx
import { useState } from 'react';
import { Switch } from 'twenty-ui/primitives/input';

export const NotificationsPreference = () => {
  const [checked, setChecked] = useState(true);

  return (
    <label>
      <Switch
        name="notifications"
        checked={checked}
        onCheckedChange={setChecked}
      />
      Email notifications
    </label>
  );
};
```

`onCheckedChange` receives the next boolean and event details. The `size` prop accepts `sm` or `md` and defaults to `md`.

## Keyboard and forms

Tab moves focus to the switch; Space toggles it. Clicking its associated label also toggles it. Use `disabled` to prevent interaction or `readOnly` to retain a focusable control whose value cannot be changed.

A named switch submits its value when checked. Use `value` to customize that value, and `uncheckedValue` if the form should also submit a value when it is off.

## Props

The reference includes component-specific and inherited Base UI props. Native attributes such as `aria-label` and `data-*` are also accepted.

<SwitchReference />