Radio

Forms

About

A native-feeling radio input with the selected dial drawn on it, used as the single control inside a radio group for picking one option among several.

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

Code

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

Usage.tsx

"use client";

import Radio from "@/components/ui/radio";
import { useState } from "react";

const OPTIONS = [
  {
    value: "standard",
    label: "Standard",
    hint: "Arrives in 3 working days · free",
  },
  { value: "express", label: "Express", hint: "Arrives tomorrow · $2,48" },
  { value: "instant", label: "Instant", hint: "Arrives in minutes · $4,90" },
];

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

  return (
    <div className="flex w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-sm rounded-xl border border-border bg-card p-5 shadow-sm">
        <p className="mb-3 text-sm font-semibold text-foreground">
          Transfer speed
        </p>
        <div className="flex flex-col gap-3">
          {OPTIONS.map((option) => (
            <label
              key={option.value}
              className="flex cursor-pointer items-start gap-3 rounded-lg py-1"
            >
              <span className="pt-0.5">
                <Radio
                  name="transfer-speed"
                  value={option.value}
                  checked={value === option.value}
                  onChange={() => setValue(option.value)}
                />
              </span>
              <span className="flex flex-col">
                <span className="text-sm font-medium text-foreground">
                  {option.label}
                </span>
                <span className="text-xs text-muted-foreground">
                  {option.hint}
                </span>
              </span>
            </label>
          ))}
        </div>
      </div>
    </div>
  );
}