Switch Label

Toggle switch with integrated label text, supporting outline and filled variants.

Airplane mode
Notifications
1import { SwitchLabel } from "@/zeroui/components/switches";
2
3export 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-label

Props

nametypedefaultdescription
labelstringrequired-
checkedbooleanundefined-
defaultCheckedbooleanfalse-
onChange(checked: boolean) => voidundefined-
disabledbooleanfalse-
labelPosition"left" | "right""left"-
size"sm" | "md" | "lg""md"-
variant"filled" | "outline""outline"-