> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Switch

> A labeled on or off control with controlled and uncontrolled state.

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

## Uncontrolled state

```tsx theme={null}
import { Switch } from 'twenty-ui/input';

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

## Controlled state

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

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

  return (
    <label>
      <Switch 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.

<ParamField body="checked" type="boolean">
  Whether the switch is currently active.

  To render an uncontrolled switch, use the `defaultChecked` prop instead.
</ParamField>

<ParamField body="className" type="string | ((state: SwitchRootState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="defaultChecked" type="boolean" default="false">
  Whether the switch is initially active.

  To render a controlled switch, use the `checked` prop instead.
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Whether the component should ignore user interaction.
</ParamField>

<ParamField body="form" type="string">
  Identifies the form that owns the hidden input.
  Useful when the switch is rendered outside the form.
</ParamField>

<ParamField body="id" type="string">
  The id of the hidden input element.

  When `nativeButton` is `true`, the id is applied to the root element.
</ParamField>

<ParamField body="inputRef" type="Ref<HTMLInputElement>">
  A ref to access the hidden `<input>` element.
</ParamField>

<ParamField body="name" type="string">
  Identifies the field when a form is submitted.
</ParamField>

<ParamField body="nativeButton" type="boolean" default="false">
  Whether the component renders a native `<button>` element when replacing it
  via the `render` prop.
  Set to `true` if the rendered element is a native button.
</ParamField>

<ParamField body="onCheckedChange" type="((checked: boolean, eventDetails: { reason: &#x22;none&#x22;; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)">
  Event handler called when the switch is activated or deactivated.
</ParamField>

<ParamField body="readOnly" type="boolean" default="false">
  Whether the user should be unable to activate or deactivate the switch.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SwitchRootState>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>

<ParamField body="required" type="boolean" default="false">
  Whether the user must activate the switch before submitting a form.
</ParamField>

<ParamField body="size" type="&#x22;sm&#x22; | &#x22;md&#x22;" default="md">
  Visual size of the switch.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: SwitchRootState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="uncheckedValue" type="string">
  The value submitted with the form when the switch is off.
  By default, unchecked switches do not submit any value, matching native checkbox behavior.
</ParamField>

<ParamField body="value" type="string">
  The value submitted with the form when the switch is on.
  By default, switch submits the "on" value, matching native checkbox behavior.
</ParamField>