Radio Group

A set of mutually exclusive options built on Radix Radio Group. Only one option can be selected at a time.

Import

import { RadioGroup, RadioGroupItem } from "poyraz-ui/atoms";

Default

Basic radio group with three options.

Option One

Option Two

Option Three

<RadioGroup defaultValue="option-1">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-1" id="r1" />
    <Label htmlFor="r1">Option One</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-2" id="r2" />
    <Label htmlFor="r2">Option Two</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-3" id="r3" />
    <Label htmlFor="r3">Option Three</Label>
  </div>
</RadioGroup>

Horizontal

Radio group items laid out horizontally.

Small

Medium

Large

<RadioGroup defaultValue="sm" className="flex gap-4">
  <div className="flex items-center gap-1.5">
    <RadioGroupItem value="sm" id="sm" />
    <Label htmlFor="sm">Small</Label>
  </div>
  <div className="flex items-center gap-1.5">
    <RadioGroupItem value="md" id="md" />
    <Label htmlFor="md">Medium</Label>
  </div>
  <div className="flex items-center gap-1.5">
    <RadioGroupItem value="lg" id="lg" />
    <Label htmlFor="lg">Large</Label>
  </div>
</RadioGroup>