Aurora Switch

Forms

About

An accessible on/off switch (WAI-ARIA switch pattern) with a clickable label and optional hint text, built as a native button with role="switch" so Enter and Space both toggle it. Ported from the Angular ngx-aurora-ui library's au-switch component by Konica Maheshwari.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Aurora Switch to your project and fits it to your theme.

Code

How Aurora Switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function SwitchDemo() {
  const [on, setOn] = useState(false);

  return (
    <div
      className="flex w-full max-w-sm flex-col gap-4"
      style={{ fontFamily: "var(--au-font)" }}
    >
      <div
        className="flex flex-col gap-4 rounded-xl p-5"
        style={{
          border: "1px solid var(--au-border)",
          background: "var(--au-surface)",
        }}
      >
        <Switch
          checked={on}
          onCheckedChange={setOn}
          hint="Applies immediately."
        >
          Compact mode
        </Switch>
        <Switch defaultChecked>Autosave drafts</Switch>
      </div>
      <p style={{ color: "var(--au-text)" }}>
        value: <code>{String(on)}</code>
      </p>
    </div>
  );
}