Switch

A neumorphism-styled toggle switch for binary choices.

Preview

Installation

bash

npx shadcn@latest add @zerodrive/switch

Then import the component:

tsx

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

States

The switch has unchecked and checked states.

Unchecked

Checked

tsx

<Switch defaultChecked={false} />
<Switch defaultChecked={true} />

Color Palettes

Apply different color palettes to customize the active indicator dot.

tsx

<Switch defaultChecked palette="lime" />
<Switch defaultChecked palette="pink" />
<Switch defaultChecked palette="violet" />
<Switch defaultChecked palette="purple" />
<Switch defaultChecked palette="blue-gray" />
<Switch defaultChecked palette="gray" />

Props

Prop	Type	Default	Description
`checked`	`boolean`	-	The controlled checked state of the switch.
`defaultChecked`	`boolean`	-	The default checked state for uncontrolled usage.
`onCheckedChange`	`(checked: boolean) => void`	-	Callback fired when the checked state changes.
`palette`	`"lime" \| "pink" \| "violet" \| "purple" \| "blue-gray" \| "gray"`	`"purple"`	The color palette for the active indicator.
`disabled`	`boolean`	`false`	Whether the switch is disabled.
`className`	`string`	-	Additional CSS classes to apply.

Examples

With Label

Enable notifications

tsx

<label className="flex items-center gap-3">
  <Switch defaultChecked palette="lime" />
  <span>Enable notifications</span>
</label>

Controlled Switch

Use checked and onCheckedChange for controlled behavior.

tsx

const [checked, setChecked] = useState(false)

<Switch
  checked={checked}
  onCheckedChange={setChecked}
  palette="violet"
/>

Disabled

Disabled Off

Disabled On

tsx

<Switch disabled />
<Switch disabled defaultChecked />