Toggles

Forms

About

A set of accessible native-input toggle controls — checkbox, radio/radio group, and switch — sharing one label/description/error layout for settings and forms.

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

Code

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

Usage.tsx

import { Checkbox } from "@/components/ui/toggles";
import { useState } from "react";

export default function CheckboxDemo() {
  const [terms, setTerms] = useState(false);

  return (
    <div
      className="mors-scope flex w-full items-center justify-center p-10"
      style={{ background: "var(--mors-color-canvas)" }}
    >
      <div className="flex w-full max-w-sm flex-col gap-5">
        <Checkbox label="Default" />
        <Checkbox label="Checked" defaultChecked />
        <Checkbox label="Indeterminate" indeterminate />
        <Checkbox
          label="With description"
          description="Roughly one message a month."
        />
        <Checkbox label="Disabled" disabled />
        <Checkbox
          label="I accept the terms"
          error={!terms ? "You must accept to continue." : undefined}
          checked={terms}
          onChange={(event) => setTerms(event.currentTarget.checked)}
        />
      </div>
    </div>
  );
}