Sign InSign Up

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.

tsximport {
  RadioGroup,
  RadioGroupItem
} from '@components/ui/RadioGroup';
 
import { Label } from '@components/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>
PreviousSelect
NextButton