Radio Group

Forms

About

A single-choice radio group with optional per-item descriptions, disabled items, horizontal/vertical layout, server-driven options, keyboard roving-focus navigation and native form submission.

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

export default function RadioGroupDescriptionsDemo() {
  const [shield, setShield] = useState("balanced");
  const [rations, setRations] = useState("double");

  return (
    <div style={{ display: "grid", gap: 24 }}>
      <RadioGroup label="Shield profile" value={shield} onChange={setShield}>
        <Radio value="balanced" description="Even coverage, no surprises">
          Balanced
        </Radio>
        <Radio value="forward" description="Everything to the bow">
          Forward
        </Radio>
        <Radio value="off" description="For when the sensors need silence">
          Off
        </Radio>
      </RadioGroup>
      <RadioGroup
        label="Rations"
        orientation="horizontal"
        value={rations}
        onChange={setRations}
      >
        <Radio value="single">Single</Radio>
        <Radio value="double">Double</Radio>
        <Radio value="feast">Feast</Radio>
      </RadioGroup>
    </div>
  );
}