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 RadioGroupDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <RadioGroup
        name="guests"
        legend="Guests"
        defaultValue="2"
        options={[
          { value: "2", label: "2 guests" },
          { value: "4", label: "4 guests" },
          { value: "6", label: "6 guests" },
        ]}
      />
    </div>
  );
}