OOratiq

Switch

Ready

Immediate on/off toggle.

Requires radix-ui

Installation

$ npx @oratiq-js/ui add switch

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

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

States and sizes

off

on

disabled

sizes

Switch vs. Checkbox

A switch applies immediately. A checkbox stages a change that a submit button commits. If your switch needs a Save button next to it, it should have been a checkbox.

Accessibility

  • Renders role="switch" with aria-checked, so it is announced as on/off rather than checked/unchecked.
  • The thumb travels toward the correct edge under RTL — the transform is mirrored, not duplicated.
  • Requires a label: either an aria-label or a Field / Label pairing.

View source on GitHub → components/ui/switch.tsx