<Switch id="notify-projects" defaultChecked />
<Label htmlFor="notify-projects">Notify me about new projects</Label>A switch applies as soon as it is flipped; a Checkbox waits for the form to be submitted. If there is a Save button underneath, it is a checkbox.
API
| Prop | Type | Default | |
|---|---|---|---|
size | "default" | "sm" | "default" | |
checked | boolean | — | Whether the switch is currently active. To render an uncontrolled switch, use the defaultChecked prop instead. |
className | string | ((state: SwitchRootState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultChecked | boolean | — | Whether the switch is initially active. To render a controlled switch, use the checked prop instead. |
disabled | boolean | — | Whether the component should ignore user interaction. |
form | string | — | Identifies the form that owns the hidden input. Useful when the switch is rendered outside the form. |
id | string | — | The id of the hidden input element. When nativeButton is true, the id is applied to the root element. |
inputRef | Ref<HTMLInputElement> | — | A ref to access the hidden <input> element. |
name | string | — | Identifies the field when a form is submitted. |
nativeButton | boolean | — | 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) | — | Event handler called when the switch is activated or deactivated. |
readOnly | boolean | — | Whether the user should be unable to activate or deactivate the switch. |
render | ComponentRenderFn<HTMLProps, SwitchRootState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | 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 | boolean | — | Whether the user must activate the switch before submitting a form. |
style | CSSProperties | ((state: SwitchRootState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
uncheckedValue | 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. |
value | string | — | The value submitted with the form when the switch is on. By default, switch submits the "on" value, matching native checkbox behavior. |
Plus the DOM props of the element it renders. Source: switch/components/switch.tsx.