Forms

Switch

An on/off switch for settings that apply at once. It is a native checkbox with role="switch"; the square thumb moves in pixel steps.

Reduced motionCompact density

demos/switch.tsx

import { Switch } from "pixelbits/switch";

export default function Demo() {
  return (
    <div className="grid gap-3">
      <Switch label="Reduced motion" defaultChecked />
      <Switch label="Compact density" size="sm" />
    </div>
  );
}

Installation

npm: import

import { Switch } from "pixelbits/switch";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/switch.json

API

<Switch>

An on/off switch for settings that apply at once. It is a native checkbox with role="switch"; the square thumb moves in pixel steps.

Example

<Switch label="Reduced motion" checked={reduced} onCheckedChange={setReduced} />

Prop	Type	Default	Description
label	ReactNode	—	Text next to the switch; clicking it toggles the switch.
onCheckedChange	(checked: boolean) => void	—	Called with the new on/off state. The native `onChange` still works too.
size	"sm" \| "md"	"md"	Size of the track: `"sm"` 32 x 18 px, `"md"` 40 x 22 px.

Also accepts every prop of Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "children">.