Radio Group

Forms

About

Radio group as plain radios or selectable cards with a hint and a price. Arrow keys move and select, per the ARIA pattern. Part of the Layro System: layro.vercel.app.

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

import * as React from "react";
import { RadioGroup, RadioGroupItem } from "@/components/ui/layro-radio-group";

/* One choice from a few. Cards for plans, with the price on the right;
   plain radios for the billing period. Arrow keys move and select. */

export default function RadioGroupDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 400 }}>
        <h2 className="text-[16px] font-semibold tracking-[-0.01em]">Choose a plan</h2>
        <div className="mb-5" />
        <RadioGroup defaultValue="team" variant="card" aria-label="Plan">
          <RadioGroupItem value="starter" label="Starter" hint="For a small team finding its feet" aside="$29" />
          <RadioGroupItem value="team" label="Team" hint="For a studio with clients" aside="$89" />
          <RadioGroupItem value="scale" label="Scale" hint="For several teams under one roof" aside="$249" />
        </RadioGroup>
        <RadioGroup defaultValue="month" aria-label="Billing period" className="mt-4 flex! gap-5">
          <RadioGroupItem value="month" label="Monthly" />
          <RadioGroupItem value="year" label="Yearly" />
        </RadioGroup>
      </div>
    </div>
  );
}