Primitive / Atomstable
Radio Group
Mutually exclusive selection control with variant-capable radio items.
@glinui/uiComponent: radio-group
Installation
Install from the package for shared ownership or from the registry for copy-paste control.
Package Manager
pnpm add @glinui/ui @glinui/tokensRegistry
pnpm dlx @glinui/cli@latest add radio-groupUsage
Basic
TSX
1import { RadioGroup, RadioGroupItem } from "@glinui/ui"23export function Demo() {4 return (5 <RadioGroup defaultValue="starter" className="gap-3">6 <label className="flex items-center gap-2 text-sm">7 <RadioGroupItem value="starter" /> Starter8 </label>9 <label className="flex items-center gap-2 text-sm">10 <RadioGroupItem value="pro" /> Pro11 </label>12 <label className="flex items-center gap-2 text-sm">13 <RadioGroupItem value="enterprise" /> Enterprise14 </label>15 </RadioGroup>16 )17}
Variants + Sizes
TSX
1import { RadioGroup, RadioGroupItem } from "@glinui/ui"23export function Demo() {4 return (5 <div className="space-y-3">6 <RadioGroup defaultValue="glass" orientation="horizontal" className="flex items-center gap-3">7 <RadioGroupItem value="default" variant="default" aria-label="Default" />8 <RadioGroupItem value="glass" variant="glass" aria-label="Glass" />9 <RadioGroupItem value="liquid" variant="liquid" aria-label="Liquid" />10 <RadioGroupItem value="matte" variant="matte" aria-label="Matte" />11 <RadioGroupItem value="outline" variant="outline" aria-label="Outline" />12 </RadioGroup>13 <RadioGroup defaultValue="md" orientation="horizontal" className="flex items-center gap-3">14 <RadioGroupItem value="sm" size="sm" aria-label="Small" />15 <RadioGroupItem value="md" size="md" aria-label="Medium" />16 <RadioGroupItem value="lg" size="lg" aria-label="Large" />17 </RadioGroup>18 </div>19 )20}
Accessibility
- Built on Radix RadioGroup with full ARIA support.
- Each item requires a unique `value`.
Keyboard Interactions
| Key | Action |
|---|---|
| Arrow Up / Down / Left / Right | Navigate between radio items. |
| Space | Select the focused radio item. |
ARIA Attributes
- `role="radiogroup"` on root
- `role="radio"` on items
- `aria-checked`
Reduced Motion
Indicator transitions respect `prefers-reduced-motion`.
Affected properties
transformopacityAPI Reference
RadioGroupProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
value | string | No | - | Controlled selected value. |
defaultValue | string | No | - | Initial selected value for uncontrolled usage. |
onValueChange | (value: string) => void | No | - | Change handler. |
orientation | "horizontal" | "vertical" | No | "vertical" | Layout direction. |
disabled | boolean | No | false | Disables all items. |
RadioGroupItemProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
value | string | Yes | - | Value submitted by the item when selected. |
variant | "default" | "glass" | "liquid" | "matte" | "outline" | No | "default" | Visual treatment for `RadioGroupItem`. |
size | "sm" | "md" | "lg" | No | "md" | Control size for `RadioGroupItem`. |
disabled | boolean | No | false | Disables this radio item. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { RadioGroup } from "@glinui/ui"Source Files
Dependencies
@glinui/uiGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/radio-group.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata
Primary Props Type
RadioGroupProps
RadioGroupItemProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
disabled | boolean | No | - | Disables this radio item. |
size | "sm" | "md" | "lg" | No | "md" | Size of the radio control. |
value | string | Yes | - | Value submitted by this radio item when selected. |
variant | "default" | "glass" | "liquid" | "matte" | "outline" | No | "default" | Surface treatment for the radio item shell. |
RadioGroupProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
defaultValue | string | No | - | Initial selected value for uncontrolled usage. |
disabled | boolean | No | - | Disables all radio items in the group. |
onValueChange | (value: string) => void | No | - | Called when the selected value changes. |
orientation | "horizontal" | "vertical" | No | - | Layout direction for radio items. |
value | string | No | - | Controlled selected value. |