Switch

Switch toggles an immediate setting on or off. Use Checkbox for independent choices in a form or when the value is submitted with other fields.

Code

<div className="tw:flex tw:flex-col tw:gap-4">
  <div className="tw:flex tw:items-center tw:gap-2">
    <Switch id="auto-approve" />
    <Label htmlFor="auto-approve">Auto-approve orders</Label>
  </div>

  <div className="tw:flex tw:items-center tw:gap-2">
    <Switch defaultChecked id="inventory-alerts" />
    <Label htmlFor="inventory-alerts">Inventory alerts</Label>
  </div>

  <div className="tw:flex tw:items-center tw:gap-2">
    <Switch disabled id="notifications" />

    <Label htmlFor="notifications" className="tw:opacity-50">
      Notifications (disabled)
    </Label>
  </div>
</div>

API

Switch

Name	Type/Description
checked	boolean | undefined Whether the switch is currently active. To render an uncontrolled switch, use the `defaultChecked` prop instead.
className	string | ((state: SwitchRootState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
defaultChecked = false	boolean | undefined Whether the switch is initially active. To render a controlled switch, use the `checked` prop instead.
disabled = false	boolean | undefined Whether the component should ignore user interaction.
form	string | undefined Identifies the form that owns the hidden input. Useful when the switch is rendered outside the form.
id	string | undefined The id of the hidden input element. When `nativeButton` is `true`, the id is applied to the root element.
inputRef	Ref<HTMLInputElement> | undefined A ref to access the hidden `<input>` element.
name	string | undefined Identifies the field when a form is submitted.
nativeButton = false	boolean | undefined 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.
onCheckedChange	((checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void) | undefined Event handler called when the switch is activated or deactivated.
readOnly = false	boolean | undefined Whether the user should be unable to activate or deactivate the switch.
ref	((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SwitchRootState> | undefined 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.
required = false	boolean | undefined Whether the user must activate the switch before submitting a form.
size = "default"	"default" | "sm" | undefined
style	CSSProperties | ((state: SwitchRootState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.
uncheckedValue	string | undefined The value submitted with the form when the switch is off. By default, unchecked switches do not submit any value, matching native checkbox behavior.
value	string | undefined The value submitted with the form when the switch is on. By default, switch submits the "on" value, matching native checkbox behavior.