A switch component with label support. The label can be placed at the Start, End, Top, or Bottom position with full RTL support.
Loading demo: switch-real-world
npx sdaia-ui@latest add switch
import { Switch } from "@/components/ui/switch"<Switch placement="start" />The default unchecked state.
Loading demo: switch-label-off
Use `on={true}` or `defaultChecked` to set the switch to the on state.
Loading demo: switch-label-on
Use `state="Disabled" to show the disabled state.
Loading demo: switch-label-disabled
Props for the Switch component.
Prop | Type | Default | Required |
|---|---|---|---|
label | ReactNode | — | optional |
placement | "start" | "end" | "top" | "bottom" | "start" | optional |
on | boolean | — | optional |
defaultChecked | boolean | — | optional |
size | "md" | "lg" | "md" | optional |
error | string | — | optional |
helperText | string | — | optional |
disabled | boolean | false | optional |
onChange | ChangeEventHandler<HTMLInputElement> | — | optional |