Radio Group

Radio Group for selecting one of many options.

The Radio Group field is used to create a drop-down list of options for the user to choose from. This component is built on top of the Radix UI library and styled using Tailwind CSS.

This component comes from the Shadcn UI Library - with minimal changes to the original component. I recommended to check out the original documentation for more information.

Basic Radio Group

The below shows a basic Radio Group as provided by the Shadcn UI library.

import { RadioGroup, RadioGroupItem } from '~/core/ui/RadioGroup'; import { Label } from '~/core/ui/Label'; <RadioGroup> <div className="flex items-center space-x-2"> <RadioGroupItem id="r1" value={'Apple'} /> <Label htmlFor="r1">Apple</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem id="r2" value={'Banana'} /> <Label htmlFor="r2">Banana</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem id="r3" value={'Peach'} /> <Label htmlFor="r3">Peach</Label> </div> </RadioGroup>

Radio Group with labels

The below shows a Radio Group with a Label component for each option. This component is provided by Makerkit.

import { RadioGroup, RadioGroupItem, RadioGroupItemLabel } from '~/core/ui/RadioGroup'; <RadioGroup className='max-w-xs w-full'> <RadioGroupItemLabel> <RadioGroupItem value={'Apple'} /> Apple </RadioGroupItemLabel> <RadioGroupItemLabel> <RadioGroupItem value={'Banana'} /> Banana </RadioGroupItemLabel> <RadioGroupItemLabel> <RadioGroupItem value={'Peach'} /> Peach </RadioGroupItemLabel> </RadioGroup>

Radio Group with labels and descriptions

The below shows a Radio Group with a Label component for each option with a description. This component is provided by Makerkit.

import { RadioGroup, RadioGroupItem, RadioGroupItemLabel } from '~/core/ui/RadioGroup'; <RadioGroup className='max-w-xs w-full'> <RadioGroupItemLabel> <RadioGroupItem value={'Free'} /> <div> <h3 className='font-semibold'>Free Plan</h3> <p className='text-xs'> Free forever. No credit card needed. </p> </div> </RadioGroupItemLabel> <RadioGroupItemLabel> <RadioGroupItem value={'Basic'} /> <div> <h3 className='font-semibold'>Basic Plan</h3> <p className='text-xs'> $10 per month. Up to 10 users. 100GB storage. </p> </div> </RadioGroupItemLabel> <RadioGroupItemLabel> <RadioGroupItem value={'Enterprise'} /> <div> <h3 className='font-semibold'>Enterprise Plan</h3> <p className='text-xs'> $99 per month. Unlimited 10 users. 5TB storage. </p> </div> </RadioGroupItemLabel> </RadioGroup>

API

The complete API documentation for the RadioGroup component is available on the Shadcn UI documentation.


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS