Primitive / Atomstable

Radio Group

Mutually exclusive selection control with variant-capable radio items.

@glinui/uiComponent: radio-group

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add radio-group

Usage$

Option One

Option Two

Option Three

TSX

1import { RadioGroup, RadioGroupItem } from "@glinui/ui"
2
3export function RadioGroupBasicDemo() {
4return (
5  <RadioGroup defaultValue="option-1">
6    <div className="flex items-center gap-2">
7      <RadioGroupItem value="option-1" id="r1" />
8      <label htmlFor="r1" className="text-sm">Option One</label>
9    </div>
10    <div className="flex items-center gap-2">
11      <RadioGroupItem value="option-2" id="r2" />
12      <label htmlFor="r2" className="text-sm">Option Two</label>
13    </div>
14    <div className="flex items-center gap-2">
15      <RadioGroupItem value="option-3" id="r3" />
16      <label htmlFor="r3" className="text-sm">Option Three</label>
17    </div>
18  </RadioGroup>
19)
20}

Examples$

Default Value$

Monthly billing

Annual billing

TSX

1import { RadioGroup, RadioGroupItem } from "@glinui/ui"
2
3export function RadioGroupDefaultValueDemo() {
4return (
5  <RadioGroup defaultValue="monthly">
6    <div className="flex items-center gap-2">
7      <RadioGroupItem value="monthly" id="monthly" />
8      <label htmlFor="monthly" className="text-sm">Monthly billing</label>
9    </div>
10    <div className="flex items-center gap-2">
11      <RadioGroupItem value="annual" id="annual" />
12      <label htmlFor="annual" className="text-sm">Annual billing</label>
13    </div>
14  </RadioGroup>
15)
16}

Disabled Item$

Light

Dark

System (unavailable)

TSX

1import { RadioGroup, RadioGroupItem } from "@glinui/ui"
2
3export function RadioGroupDisabledItemDemo() {
4return (
5  <RadioGroup defaultValue="light">
6    <div className="flex items-center gap-2">
7      <RadioGroupItem value="light" id="light" />
8      <label htmlFor="light" className="text-sm">Light</label>
9    </div>
10    <div className="flex items-center gap-2">
11      <RadioGroupItem value="dark" id="dark" />
12      <label htmlFor="dark" className="text-sm">Dark</label>
13    </div>
14    <div className="flex items-center gap-2">
15      <RadioGroupItem value="system" id="system" disabled />
16      <label htmlFor="system" className="text-sm text-neutral-400">System (unavailable)</label>
17    </div>
18  </RadioGroup>
19)
20}

Horizontal$

TSX

1import { RadioGroup, RadioGroupItem } from "@glinui/ui"
2
3export function RadioGroupHorizontalDemo() {
4return (
5  <RadioGroup defaultValue="xs" orientation="horizontal" className="flex gap-6">
6    <div className="flex items-center gap-2">
7      <RadioGroupItem value="xs" id="xs" />
8      <label htmlFor="xs" className="text-sm">XS</label>
9    </div>
10    <div className="flex items-center gap-2">
11      <RadioGroupItem value="sm" id="sm-size" />
12      <label htmlFor="sm-size" className="text-sm">SM</label>
13    </div>
14    <div className="flex items-center gap-2">
15      <RadioGroupItem value="md" id="md-size" />
16      <label htmlFor="md-size" className="text-sm">MD</label>
17    </div>
18    <div className="flex items-center gap-2">
19      <RadioGroupItem value="lg" id="lg-size" />
20      <label htmlFor="lg-size" className="text-sm">LG</label>
21    </div>
22  </RadioGroup>
23)
24}

Item Variants$

TSX

1import { RadioGroup, RadioGroupItem } from "@glinui/ui"
2
3export function RadioGroupVariantDemo() {
4return (
5  <RadioGroup defaultValue="glass" orientation="horizontal" className="flex items-center gap-4">
6    <RadioGroupItem value="default" variant="default" aria-label="Default" />
7    <RadioGroupItem value="glass" variant="glass" aria-label="Glass" />
8    <RadioGroupItem value="liquid" variant="liquid" aria-label="Liquid" />
9    <RadioGroupItem value="matte" variant="matte" aria-label="Matte" />
10    <RadioGroupItem value="outline" variant="outline" aria-label="Outline" />
11  </RadioGroup>
12)
13}

Item Sizes$

TSX

1import { RadioGroup, RadioGroupItem } from "@glinui/ui"
2
3export function RadioGroupSizeDemo() {
4return (
5  <RadioGroup defaultValue="md" orientation="horizontal" className="flex items-center gap-4">
6    <RadioGroupItem value="sm" size="sm" aria-label="Small" />
7    <RadioGroupItem value="md" size="md" aria-label="Medium" />
8    <RadioGroupItem value="lg" size="lg" aria-label="Large" />
9  </RadioGroup>
10)
11}

Accessibility$

Built on @radix-ui/react-radio-group, which follows the WAI-ARIA Radio Group pattern.
Arrow keys move focus and selection between items within the group.
Each RadioGroupItem must have a corresponding <label> linked via id / htmlFor.
The group can be given a label via aria-label or aria-labelledby on RadioGroup.

Reduced Motion$

The fill indicator animation on selection is removed when prefers-reduced-motion: reduce is detected.

API Reference$

RadioGroup$

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.

RadioGroupItem$

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.

Source$

TSX

1import { RadioGroup, RadioGroupItem } from "@glinui/ui"

packages/ui/src/components/radio-group.tsx

packages/ui/src/tests/radio-group.test.tsx

Generated API Snapshot

Beta

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