Switch

A toggle control that switches between on and off states. Ideal for settings, preferences, and feature toggles. Built on Radix UI Switch.

Preview

Default

Settings Group

Receive booking updates

Get travel deals and offers

Use dark theme

Disabled

Usage

tsx
import { Switch } from "zostel-ui";
import { Label } from "zostel-ui";

<div className="flex items-center gap-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>

{/* Controlled */}
<Switch
  checked={isEnabled}
  onCheckedChange={setIsEnabled}
/>

Props

checked
Type: boolean
Default: false

The controlled checked state of the switch.

defaultChecked
Type: boolean
Default: false

The default checked state when uncontrolled.

onCheckedChange
Type: (checked: boolean) => void
Default: —

Called when the checked state changes.

disabled
Type: boolean
Default: false

Disables the switch.

className
Type: string
Default: ""

Additional CSS classes to apply.
Previous Radio Group Next Slider