//
A control that allows the user to toggle between checked and not checked.
bun add xiod-ui1import { Switch } from "xiod-ui/switch";1<Switch>2</Switch>| Prop | Type | Default | Description |
|---|---|---|---|
id | string| undefined | - | The id of the hidden input element. When `nativeButton` is `true`, the id is applied to the root element. |
checked | boolean| undefined | - | Whether the switch is currently active. To render an uncontrolled switch, use the `defaultChecked` prop instead. |
defaultChecked | boolean| undefined | false | Whether the switch is initially active. To render a controlled switch, use the `checked` prop instead. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
inputRef | Ref<HTMLInputElement>| undefined | - | A ref to access the hidden `<input>` element. |
name | string| undefined | - | Identifies the field when a form is submitted. |
form | string| undefined | - | Identifies the form that owns the hidden input. Useful when the switch is rendered outside the form. |
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 | boolean| undefined | false | Whether the user should be unable to activate or deactivate the switch. |
required | boolean| undefined | false | Whether the user must activate the switch before submitting a form. |
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. |
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. |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
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. |
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. |
render | ReactElement<unknown, 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. |
size | "sm"| "lg"| "md"| "xl"| "2xl"| null| undefined | md | |
variant | "default"| "expressive"| "classic"| "sharp"| null| undefined | default |