Radio Group

Cards 11

About

Here is Radio Group component

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

Code

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

Usage.tsx

"use client";

import { RadioGroup } from "@ark-ui/react/radio-group";
import { Palette, Paintbrush, Eraser, Scissors } from "lucide-react";

export default function Grid() {
  const tools = [
    { value: "palette", label: "Palette", icon: Palette },
    { value: "brush", label: "Brush", icon: Paintbrush },
    { value: "eraser", label: "Eraser", icon: Eraser },
    { value: "cut", label: "Cut", icon: Scissors },
  ];

  return (
    <RadioGroup.Root
      className="grid grid-cols-2 gap-3 w-full max-w-sm"
      defaultValue="eraser"
    >
      {tools.map((tool) => (
        <RadioGroup.Item
          key={tool.value}
          value={tool.value}
          className="relative flex flex-col items-start gap-3 p-4 bg-white border-2 border-gray-200 rounded-lg cursor-pointer hover:border-gray-300 hover:bg-gray-50 data-[state=checked]:border-blue-500 data-[state=checked]:bg-blue-50 dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-700 dark:data-[state=checked]:border-blue-500 dark:data-[state=checked]:bg-blue-950/50 transition-all duration-200"
        >
          <div className="flex w-full justify-between items-start">
            <tool.icon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
            <RadioGroup.ItemControl className="group size-4 bg-white border-2 border-gray-300 rounded-full data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 data-hover:border-gray-400 dark:bg-gray-900 dark:border-gray-600 dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-blue-500 dark:data-hover:border-gray-400 data-focus:ring-2 data-focus:ring-blue-500/50 transition-all duration-200 flex items-center justify-center text-white">
              <svg
                width="6"
                height="6"
                viewBox="0 0 6 6"
                fill="currentcolor"
                xmlns="http://www.w3.org/2000/svg"
                className="opacity-0 group-data-[state=checked]:opacity-100 transition-opacity"
              >
                <circle cx="3" cy="3" r="3"></circle>
              </svg>
            </RadioGroup.ItemControl>
          </div>

          <RadioGroup.ItemText className="text-sm font-medium text-gray-900 dark:text-gray-100">
            {tool.label}
          </RadioGroup.ItemText>

          <RadioGroup.ItemHiddenInput />
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  );
}