Switch

Toggle switch for on/off settings.

formtoggleboolean

Import

import { Switch } from "@/components/ui";

Basic Usage

Switch Preview

Email notificationsDark modeAuto-saveDisabled

SmMdLg

Code

tsx

<Switch label="Enable notifications" />

Sizes

Available in multiple sizes

1<div className="flex items-center gap-4">
2  <Switch size="sm" label="Small" />
3  <Switch size="md" label="Medium" />
4  <Switch size="lg" label="Large" />
5</div>

Controlled State

Manage switch state

1const [enabled, setEnabled] = useState(false);
2
3return (
4  <Switch
5    label="Dark mode"
6    checked={enabled}
7    onChange={(e) => setEnabled(e.target.checked)}
8  />
9);

With Description

Add context to the switch

1<Switch
2  label="Marketing emails"
3  description="Receive emails about new features and updates"
4/>

Disabled State

Prevent user interaction

1<div className="space-y-2">
2  <Switch label="Disabled off" disabled />
3  <Switch label="Disabled on" checked disabled />
4</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring