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.

<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.

<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>
pnpm dlx shadcn@latest add @poyraz/radio-group

Runtime dependencies

@radix-ui/react-radio-group@^1.3.8

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme

Installed files

@ui/atoms/radio-group.tsx