Switch

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

API Reference

Airplane mode

Small

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/switch.tsx

Import from@viliha/vui-react/switch

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

switch-demo.tsx

import { Switch } from "@viliha/vui-react/switch";
import { Label } from "@viliha/vui-react/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.

Prop	Type	Default
size	"sm" \| "default"	"default"
checked	boolean	—
defaultChecked	boolean	—
onCheckedChange	(checked: boolean) => void	—
disabled	boolean	false

Switch props

Plus everything React.ComponentProps<typeof SwitchPrimitive.Root> accepts, passed straight through to the underlying element.

Prop	Type	Default
size?	"sm" \| "default"	"default"