> ## 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.
export const StoryEmbed = ({storyId, title, height = 240}) => <>
Open in Storybook
;
Use `Switch` for an on or off preference. Give the control a visible label or an accessible name.
## Uncontrolled state
Use `defaultChecked` to set the initial checked state. The switch owns subsequent changes.
```tsx theme={null}
import { Switch } from 'twenty-ui/primitives/input';
export const NotificationsPreference = () => (
);
```
## Controlled state
Pass `checked` and update it with `onCheckedChange` to own the same preference in React state.
```tsx theme={null}
import { useState } from 'react';
import { Switch } from 'twenty-ui/primitives/input';
export const NotificationsPreference = () => {
const [checked, setChecked] = useState(true);
return (
);
};
```
`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.
Whether the switch is currently active.
To render an uncontrolled switch, use the `defaultChecked` prop instead.
CSS class applied to the element, or a function that
returns a class based on the component's state.
Whether the switch is initially active.
To render a controlled switch, use the `checked` prop instead.
Whether the component should ignore user interaction.
Identifies the form that owns the hidden input.
Useful when the switch is rendered outside the form.
The id of the hidden input element.
When `nativeButton` is `true`, the id is applied to the root element.
A ref to access the hidden `` element.
Identifies the field when a form is submitted.
Whether the component renders a native `
Event handler called when the switch is activated or deactivated.
Whether the user should be unable to activate or deactivate the switch.
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.
Whether the user must activate the switch before submitting a form.
Visual size of the switch.
Style applied to the element, or a function that
returns a style object based on the component's state.
The value submitted with the form when the switch is off.
By default, unchecked switches do not submit any value, matching native checkbox behavior.
The value submitted with the form when the switch is on.
By default, switch submits the "on" value, matching native checkbox behavior.