Hand-drawn Radio Group

A fieldset-based radio group whose native circles are overlaid with a seeded, hand-drawn pencil ring, ink circle and dot (or a kolam flower bloom), for forms that want a sketched, paper-like feel instead of flat UI controls. Ported to React from Susegad UI's sg-radio-group web component by Sarat Chandra Gnanamgari (MIT).

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

import RadioGroup from "@/components/ui/radio";

export default function QuietRadioDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <RadioGroup
        name="plan"
        legend="Plan"
        register="quiet"
        orientation="row"
        defaultValue="monthly"
        options={[
          { value: "monthly", label: "Monthly" },
          { value: "yearly", label: "Yearly" },
        ]}
      />
    </div>
  );
}