Skip to content
GitHub

Switch

A control that allows the user to toggle between on and off.

import { Label } from "@/components/ui/pxl/label";
import { Switch } from "@/components/ui/pxl/switch";


export default function SwitchDemo() {
  return (
    <div className="flex items-center gap-2">
      <Switch defaultChecked id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  );
}

Installation

Section titled “Installation”
pnpm dlx shadcn@latest add pxl-ui/registry/switch

Usage

Section titled “Usage”
import { Switch } from "@/components/ui/pxl/switch"
<Switch />

Size

Section titled “Size”

Use the size prop to change the size of the switch.

import { Label } from "@/components/ui/pxl/label";
import { Switch } from "@/components/ui/pxl/switch";


export default function SwitchSizesExample() {
  return (
    <div className="flex flex-row flex-wrap gap-2.5">
      <div className="flex items-center gap-2">
        <Switch size="sm" defaultChecked id="sm" />
        <Label htmlFor="sm">Small</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch size="md" defaultChecked id="md" />
        <Label htmlFor="md">Medium</Label>
      </div>
    </div>
  );
}

Variants

Section titled “Variants”

Use the variant prop to change the colors of the switch.

import { Label } from "@/components/ui/pxl/label";
import { Switch } from "@/components/ui/pxl/switch";


export default function SwitchVariantsExample() {
  return (
    <div className="flex flex-row flex-wrap gap-2.5">
      <div className="flex items-center gap-2">
        <Switch variant="primary" defaultChecked id="primary" />
        <Label htmlFor="primary">Primary</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch variant="success" defaultChecked id="success" />
        <Label htmlFor="success">Success</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch variant="danger" defaultChecked id="danger" />
        <Label htmlFor="danger">Danger</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch variant="warning" defaultChecked id="warning" />
        <Label htmlFor="warning">Warning</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch variant="info" defaultChecked id="info" />
        <Label htmlFor="info">Info</Label>
      </div>
    </div>
  );
}

Disabled

Section titled “Disabled”

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.

Invalid

Section titled “Invalid”

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.

API Reference

Section titled “API Reference”

See the Base UI Switch documentation.