npm

Switch

Switch is an on/off toggle for a single setting.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/switch.

Usage

switch-demo.tsx
import { Switch } from "@viliha/vui-ui/switch";
import { Label } from "@viliha/vui-ui/label";

export function Example() {
  const [on, setOn] = React.useState(false);
  return (
    <div className="flex items-center gap-2">
      <Switch id="airplane" checked={on} onCheckedChange={setOn} />
      <Label htmlFor="airplane">Airplane mode</Label>
    </div>
  );
}

API Reference

Built on the Radix Switch primitive, plus a VUI size option.

PropTypeDefault
size"sm" | "default""default"
checkedboolean
defaultCheckedboolean
onCheckedChange(checked: boolean) => void
disabledbooleanfalse