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 PlayfulRadioDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <RadioGroup
        name="spice"
        legend="Spice level"
        register="playful"
        defaultValue="medium"
        options={[
          { value: "mild", label: "Mild" },
          { value: "medium", label: "Medium" },
          { value: "hot", label: "Hot" },
        ]}
      />
    </div>
  );
}