Switch Label
Toggle switch with integrated label text, supporting outline and filled variants.
Airplane mode
Notifications
1import { SwitchLabel } from "@/zeroui/components/switches";23export default function Example() {Variants
Outline style
Filled style
1<SwitchLabel label="Outline style" variant="outline" />2<SwitchLabel label="Filled style" variant="filled" defaultChecked />Label Position
Label on left
Label on right
1<SwitchLabel label="Label on left" labelPosition="left" />2<SwitchLabel label="Label on right" labelPosition="right" />Sizes
Small
Medium
Large
1<SwitchLabel label="Small" size="sm" />2<SwitchLabel label="Medium" size="md" />3<SwitchLabel label="Large" size="lg" />Installation
npx zeroui@latest add switch-labelProps
| name | type | default | description |
|---|---|---|---|
| label | string | required | - |
| checked | boolean | undefined | - |
| defaultChecked | boolean | false | - |
| onChange | (checked: boolean) => void | undefined | - |
| disabled | boolean | false | - |
| labelPosition | "left" | "right" | "left" | - |
| size | "sm" | "md" | "lg" | "md" | - |
| variant | "filled" | "outline" | "outline" | - |