Components — 56 Accessible React UI Primitives

Single-choice radio selection group built on Radix RadioGroup primitive supporting radio buttons and selectable card grid layouts.

// Radix — @radix-ui/react-radio-group
import { Radio, RadioGroup } from "@shavin/ui";

Default Radio Group

FreeProTeamEnterprise (disabled)

const [plan, setPlan] = useState("free");

<RadioGroup value={plan} onValueChange={setPlan} className="space-y-2">
  <Radio value="free" label="Free" />
  <Radio value="pro" label="Pro" />
  <Radio value="team" label="Team" />
  <Radio value="enterprise" label="Enterprise (disabled)" disabled />
</RadioGroup>

Radius control — default "inherit" (follows theme radius), custom overrides per item or group

Round (full)

Square (none)

Theme Inherit

<RadioGroup value={plan} onValueChange={setPlan} className="space-y-2">
  <Radio value="free" label="Round (full)" radius="full" />
  <Radio value="pro" label="Square (none)" radius="none" />
  <Radio value="team" label="Theme Inherit" radius="inherit" />
</RadioGroup>

Cards Variant (variant='cards')

SmallCompact size

MediumStandard size

LargeSpacious size

Extra LargeDisabled option

const [size, setSize] = useState("md");

<RadioGroup variant="cards" value={size} onValueChange={setSize} className="w-full">
  <Radio value="sm" label="Small" description="Compact size" />
  <Radio value="md" label="Medium" description="Standard size" />
  <Radio value="lg" label="Large" description="Spacious size" />
  <Radio value="xl" label="Extra Large" description="Disabled option" disabled />
</RadioGroup>

Props

RadioGroup Props

Prop	Type	Default
variant	"default" \| "cards"	—
radius	RadiusPreset	"inherit"

Radio Props

Prop	Type	Default
value*	string	—
label	string	—
description	string	—
disabled	boolean	—
radius	RadiusPreset	"inherit"
variant	"default" \| "cards"	—
className	string	—
children	ReactNode	—

* required