A toggle switch component with smooth sliding animation. Perfect for boolean on/off settings.
size="default"size="small"checked={true}checked={false}disabled={true}disabled={true}Toggle a boolean setting
{ checked: "boolean" }Non-interactive switch
{ disabled: "true" }Use in forms with labels
{ id: "string" }Group of switch controls
{ checked: "boolean" }import { useState } from "react";
import { DesignSwitch } from "@/components/ui/design-switch";
// Basic usage
const [checked, setChecked] = useState(false);
<DesignSwitch
checked={checked}
onCheckedChange={setChecked}
/>
// Small size
<DesignSwitch
checked={checked}
onCheckedChange={setChecked}
size="small"
/>
// Disabled state
<DesignSwitch
checked={true}
onCheckedChange={() => {}}
disabled
/>
// With label
<label className="flex items-center gap-3 cursor-pointer">
<DesignSwitch
checked={enabled}
onCheckedChange={setEnabled}
/>
<span>Enable feature</span>
</label>| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | required | The controlled state of the switch |
| onCheckedChange | (checked: boolean) => void | required | Callback when the state changes |
| size | "default" | "small" | "default" | Size of the switch (default: 32×20px, small: 24×16px) |
| disabled | boolean | false | Whether the switch is disabled |
| className | string | - | Additional CSS classes |