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 { Radio, RadioGroup } from "@/components/ui/toggles";

export default function RadioGroupDemo() {
  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-xl flex-wrap gap-8">
        <RadioGroup name="tier" legend="Support tier">
          <Radio value="standard" label="Standard" defaultChecked />
          <Radio
            value="priority"
            label="Priority"
            description="One hour response, 24/7."
          />
          <Radio value="none" label="None" disabled />
        </RadioGroup>
        <RadioGroup
          name="billing"
          legend="Billing period"
          orientation="horizontal"
        >
          <Radio value="monthly" label="Monthly" defaultChecked />
          <Radio value="yearly" label="Yearly" />
        </RadioGroup>
      </div>
    </div>
  );
}