Radio Group

Forms

About

An accessible radio group built on React Aria with label, description and validation support for choosing a single option from a list.

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 { Description, Label } from "@/components/ui/field";
import { Radio, RadioField, RadioGroup } from "@/components/ui/radio";

export default function RadioGroupDemo() {
  return (
    <div className="w-full max-w-sm">
      <RadioGroup name="billing" defaultValue="monthly">
        <Label>Billing Cycle</Label>
        <Description>Select how often you'd like to be billed</Description>

        <RadioField value="monthly">
          <Radio>Monthly</Radio>
          <Description>Billed every month</Description>
        </RadioField>
        <RadioField value="quarterly">
          <Radio>Quarterly</Radio>
          <Description>Billed every 3 months</Description>
        </RadioField>
        <RadioField value="yearly">
          <Radio>Yearly</Radio>
          <Description>Billed once per year with a discount</Description>
        </RadioField>
      </RadioGroup>
    </div>
  );
}