Radio Group 1

Forms 4

About

Here is Radio Group component

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

Code

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

Usage.tsx

import { Label } from '@/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

const RadioGroupDescriptionDemo = () => {
  return (
    <RadioGroup defaultValue='basic'>
      <div className='flex gap-2'>
        <RadioGroupItem value='basic' id='plan-basic' />
        <div className='grid flex-1 space-y-2'>
          <Label htmlFor='plan-basic'>Basic Plan</Label>
          <p className='text-muted-foreground text-xs'>Perfect for individuals just getting started</p>
        </div>
      </div>
      <div className='flex gap-2'>
        <RadioGroupItem value='pro' id='plan-pro' />
        <div className='grid flex-1 space-y-2'>
          <Label htmlFor='plan-pro'>Pro Plan</Label>
          <p className='text-muted-foreground text-xs'>Advanced features for power users and small teams</p>
        </div>
      </div>
      <div className='flex gap-2'>
        <RadioGroupItem value='enterprise' id='plan-enterprise' />
        <div className='grid flex-1 space-y-2'>
          <Label htmlFor='plan-enterprise'>Enterprise Plan</Label>
          <p className='text-muted-foreground text-xs'>Custom solutions for large organizations</p>
        </div>
      </div>
    </RadioGroup>
  )
}

export default RadioGroupDescriptionDemo