HeroUI Radio Group

Forms 3

About

HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.

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

Code

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

Usage.tsx

import { RadioGroup, Radio } from "@/components/ui/heroui-radio-group"
import { Description, Label, Surface } from "@heroui/react"

export default function OnSurface() {
  return (
    // Docs render this on the page's light-gray --background, which makes the
    // white Surface card visible. The 21st preview page is white, so reproduce
    // that backdrop here to match the original.
    <div className="mx-auto flex w-full max-w-md justify-center rounded-3xl bg-[#f4f4f5] p-8">
      <Surface className="w-full rounded-3xl p-6">
      <RadioGroup defaultValue="premium" name="plan-on-surface" variant="secondary">
        <Label>Plan selection</Label>
        <Description>Choose the plan that suits you best</Description>
        <Radio value="basic">
          <Radio.Content>
            <Radio.Control>
              <Radio.Indicator />
            </Radio.Control>
            Basic Plan
          </Radio.Content>
          <Description>Includes 100 messages per month</Description>
        </Radio>
        <Radio value="premium">
          <Radio.Content>
            <Radio.Control>
              <Radio.Indicator />
            </Radio.Control>
            Premium Plan
          </Radio.Content>
          <Description>Includes 200 messages per month</Description>
        </Radio>
        <Radio value="business">
          <Radio.Content>
            <Radio.Control>
              <Radio.Indicator />
            </Radio.Control>
            Business Plan
          </Radio.Content>
          <Description>Unlimited messages</Description>
        </Radio>
      </RadioGroup>
      </Surface>
    </div>
  )
}