Radio Group 1

Pricing 8

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 { useId } from 'react'

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

const RadioGroupCardRadioWithBorderDemo = () => {
  const id = useId()

  return (
    <RadioGroup className='w-full max-w-96 gap-2' defaultValue='1'>
      <div className='border-input has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative w-full rounded-md border p-3 shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:ring-[3px]'>
        <RadioGroupItem
          value='1'
          id={`${id}-1`}
          className='sr-only'
          aria-label='plan-radio-basic'
          aria-describedby={`${id}-1-description`}
        />

        <Label htmlFor={`${id}-1`} className='text-foreground flex flex-col items-start after:absolute after:inset-0'>
          <div className='flex w-full items-center justify-between'>
            <span>Basic</span>
            <span className='text-muted-foreground text-xs leading-[inherit] font-normal'>Free</span>
          </div>
          <p id={`${id}-1-description`} className='text-muted-foreground text-xs'>
            Get 1 project with 1 teams members.
          </p>
        </Label>
      </div>

      <div className='border-input has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative w-full rounded-md border p-3 shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:ring-[3px]'>
        <RadioGroupItem
          value='2'
          id={`${id}-2`}
          className='sr-only'
          aria-label='plan-radio-premium'
          aria-describedby={`${id}-2-description`}
        />

        <Label htmlFor={`${id}-2`} className='text-foreground flex flex-col items-start after:absolute after:inset-0'>
          <div className='flex w-full items-center justify-between'>
            <span>Premium</span>
            <span className='text-muted-foreground text-xs leading-[inherit] font-normal'>$5.00</span>
          </div>
          <p id={`${id}-2-description`} className='text-muted-foreground text-xs'>
            Get 5 projects with 5 team members.
          </p>
        </Label>
      </div>
    </RadioGroup>
  )
}

export default RadioGroupCardRadioWithBorderDemo