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

export default function RadioGroupOptionsDemo() {
  const [value, setValue] = useState("b");

  return (
    <RadioGroup
      label="Dock"
      value={value}
      onChange={setValue}
      options={[
        { value: "a", label: "Bay A" },
        { value: "b", label: "Bay B", description: "Closest to the lift" },
        { value: "c", label: "Bay C", disabled: true },
      ]}
    />
  );
}