Switch

An on/off toggle.

Updated 2026-06-04

Controlled

const [on, setOn] = useState(true);

<div class="flex items-center gap-2">
  <Switch id="wifi" checked={on} onCheckedChange={setOn} />
  <Label for="wifi">Airplane mode</Label>
</div>

An on/off toggle.

Installation

railbase ui add switch

Note

railbase ui add also copies shared primitives — they ship alongside this component automatically.

Usage

import { Switch } from "@/lib/ui/switch";

const [on, setOn] = useState(false);

<Switch checked={on} onCheckedChange={setOn} />