Radio Group

Forms

About

A radio button group for choosing one option from a visible set, with a shared highlight that glides to the selected row instead of restyling each option.

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 "@/components/ui/radio-group";
import { useState } from "react";

export default function RadioGroupDemo() {
  const [plan, setPlan] = useState("pro");
  return (
    <div className="flex w-full max-w-sm items-center justify-center p-8">
      <RadioGroup
        label="Plan"
        value={plan}
        onValueChange={setPlan}
        options={[
          {
            value: "free",
            label: "Free",
            description: "For trying things out",
          },
          {
            value: "pro",
            label: "Pro",
            description: "For individuals and small teams",
          },
          {
            value: "team",
            label: "Team",
            description: "For growing organizations",
          },
        ]}
      />
    </div>
  );
}