HeroUI Radio Group

Forms 11

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 } from "@heroui/react"

export default function Basic() {
  return (
    <RadioGroup defaultValue="premium" name="plan">
      <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>
  )
}