Radio Group

A Warcraft-themed radio group component with gem socket styling.

Default

Horizontal

Disabled

Installation

pnpm dlx shadcn@latest add https://warcraftcn.com/r/radio-group.json

Usage

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

<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>;

Horizontal Orientation

<RadioGroup defaultValue="a" orientation="horizontal">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="a" id="a" />
    <Label htmlFor="a">Option A</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="b" id="b" />
    <Label htmlFor="b">Option B</Label>
  </div>
</RadioGroup>

Disabled State

<RadioGroup defaultValue="locked" disabled>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="locked" id="locked" />
    <Label htmlFor="locked" disabled>
      Locked Option
    </Label>
  </div>
</RadioGroup>
PaginationSkeleton