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 RadioGroupDemo() {
  const [value, setValue] = useState("warp");

  return (
    <RadioGroup label="Drive mode" value={value} onChange={setValue}>
      <Radio value="impulse">Impulse</Radio>
      <Radio value="warp">Warp</Radio>
      <Radio value="tow" disabled>
        Tow (needs a tug)
      </Radio>
    </RadioGroup>
  );
}