Switch

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

Email notifications
Push notifications
Marketing emails
export default function SwitchHero() {
  return (
    <div className="w-72 space-y-4">
      {SETTINGS.map(({ id, label, defaultChecked }) => (
        <div key={id} className="flex items-center justify-between">
          <span className="text-sm text-foreground">{label}</span>
          <Switch defaultChecked={defaultChecked} />
        </div>
      ))}
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/switch.json"

Usage

import { Switch } from '@/registry/ui/switch';

<Switch />;

Examples

With label

Pair with Field and FieldLabel to associate a label with the switch in a settings row.

export default function SwitchWithLabel() {
  return (
    <Field name="autosave" className="flex items-center justify-between gap-4 w-64">
      <FieldLabel>Auto-save</FieldLabel>
      <Switch defaultChecked />
    </Field>
  );
}

Theme

The theme prop applies a color scheme to the checked state.

export function SwitchGray() {
  return <Switch defaultChecked />;
}

API Reference

PropTypeDefault
size"default" | "sm""default"
theme"gray" | "accent""gray"
classNamestring—

All other props are forwarded to the underlying Base UI Switch primitive.