Browse docsRadio Group

ControlsNew

Glass Radio Group

Options where exactly one is chosen, with a dot that pops in and shrinks away.

pnpm dlx shadcn@4.14.1 add @glassyui/glass-radio-group

Preview

For trying things out.
For teams shipping weekly.
For everything else.

Demos ready. Update 0.

Installation

First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:

Install Glass Radio Group

pnpm dlx shadcn@4.14.1 add @glassyui/glass-radio-group
What this installs5 files, 2 packages

Direct registry declarations

These values belong to @glassyui/glass-radio-group itself in registry.json.

Package dependencies

  • @radix-ui/react-radio-group
  • clsx

Registry dependencies

  • @glassyui/glass-provider

File targets

  • components/glassyui/glass-radio-group.tsx

Complete installed closure

This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.

Package dependencies

  • @radix-ui/react-radio-group
  • clsx

Installed files

  • components/glassyui/glass-radio-group.tsx
  • components/glassyui/glass-provider.tsx
  • components/glassyui/liquid-filters.tsx
  • components/glassyui/lib/preferences.ts
  • components/glassyui/styles/liquid.css

Usage

Usage

import { GlassRadioGroup, GlassRadioGroupItem } from "@/components/glassyui/glass-radio-group";

export function PlanDemo() {
  return (
    <GlassRadioGroup aria-label="Plan" defaultValue="pro">
      <GlassRadioGroupItem value="starter" label="Starter" />
      <GlassRadioGroupItem value="pro" label="Pro" description="For teams shipping weekly." />
    </GlassRadioGroup>
  );
}

Examples

Controlled

<GlassRadioGroup aria-label="Plan" value={plan} onValueChange={setPlan}>
  {PLANS.map((item) => (
    <GlassRadioGroupItem key={item.value} value={item.value} label={item.label} />
  ))}
</GlassRadioGroup>

API

GlassRadioGroup

Radix radio group. The arrow keys move the choice.

GlassRadioGroupItem

One option, with an optional label and description.

value / onValueChange

Controlled choice. Also defaultValue.

label

Text beside the button. Clicking it chooses the option.

description

A muted line under the label.

Notes

Accessibility

Name the group with aria-label or aria-labelledby. Tab enters the group and the arrow keys move within it.

Accessibility

Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.

Performance

Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.