Switch

A two-state toggle used to turn an option on or off. Supports multiple visual variants and sizes.

Installation

npx shadcn@latest add switch

Usage

import { Switch } from "@hoag/ui/components/switch";
 
export default function Demo() {
  return <Switch />;
}

Default

Enable notifications

<Switch id="default-switch" defaultChecked />
<Label htmlFor="default-switch">Enable notifications</Label>

Variants

Base variants

<Switch defaultChecked variant="default" />
<Switch defaultChecked variant="destructive" />

Heavy status

<Switch defaultChecked variant="heavy-success" />
<Switch defaultChecked variant="heavy-warning" />
<Switch defaultChecked variant="heavy-info" />
<Switch defaultChecked variant="heavy-error" />

Light status

<Switch defaultChecked variant="light-success" />
<Switch defaultChecked variant="light-warning" />
<Switch defaultChecked variant="light-info" />
<Switch defaultChecked variant="light-error" />

Outline status

<Switch defaultChecked variant="outline-success" />
<Switch defaultChecked variant="outline-warning" />
<Switch defaultChecked variant="outline-info" />
<Switch defaultChecked variant="outline-error" />

Sizes

<Switch defaultChecked size="sm" />
<Switch defaultChecked size="default" />
<Switch defaultChecked size="lg" />

With Label

Enable notifications

Marketing emails

Dark mode

<div className="flex items-center justify-between">
  <Label htmlFor="switch-notifications">Enable notifications</Label>
  <Switch id="switch-notifications" defaultChecked />
</div>
<div className="flex items-center justify-between">
  <Label htmlFor="switch-marketing">Marketing emails</Label>
  <Switch id="switch-marketing" />
</div>
<div className="flex items-center justify-between">
  <Label htmlFor="switch-dark">Dark mode</Label>
  <Switch id="switch-dark" defaultChecked variant="heavy-info" />
</div>

Disabled

<Switch disabled />
<Switch disabled defaultChecked />

API Reference

Props

Prop	Type	Default	Description
`variant`	`string`	`"default"`	Visual style of the switch
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Size of the switch
`defaultChecked`	`boolean`	`false`	Initial state (uncontrolled)
`checked`	`boolean`	—	Controlled state
`onCheckedChange`	`(checked: boolean) => void`	—	Callback on toggle
`disabled`	`boolean`	`false`	Disable the switch

Variants

Variant	Description
`default`	Primary color when on
`destructive`	Destructive/danger color when on
`heavy-success/warning/info/error`	Solid status color fill when on
`light-success/warning/info/error`	Light tinted background, both on and off states
`outline-success/warning/info/error`	Outlined ring with status color fill when on

Checkbox Tooltip