Switch

A control that allows the user to toggle between checked and unchecked states.

$ npx ruma-ui add switch

Airplane Mode

Installation

npx ruma-ui add switch

Usage

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

export default function SwitchDemo() {
  return (
    <div className="flex items-center gap-3">
      <Switch id="airplane-mode" />
      <label htmlFor="airplane-mode" className="text-sm text-zinc-300">Airplane Mode</label>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
checked	boolean	false	Controlled state of the switch.
onCheckedChange	(checked: boolean) => void	undefined	Event handler when toggle state changes.