Radio Group

A set of mutually exclusive options with roving focus and RTL support.

Group: Form Controls · Import path: @orionshub/lucent/radio-group · Client component — ships a "use client" boundary.

Import

import { RadioGroup, RadioGroupItem } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css' // once, at your app root

Examples

Options

Options

Show source

export function RadioGroupBasic() {
  return (
    <RadioGroup aria-label="Plan" defaultValue="pro">
      <RadioGroupItem value="free" aria-label="Free" label="Free — $0/mo" />
      <RadioGroupItem value="pro" aria-label="Pro" label="Pro — $12/mo" />
      <RadioGroupItem value="ent" aria-label="Enterprise" label="Enterprise — custom" />
    </RadioGroup>
  )
}

Props

RadioGroup

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

RadioGroupItem

Prop	Type	Default	Description
label	React.ReactNode	—	Optional label rendered beside the radio button.

Guidance

One-time CSS import

Import the compiled stylesheet once at your app root: import '@orionshub/lucent/styles.css'. Components ship stable class names and read design tokens from CSS custom properties — there is no style runtime. See CSS Import.

Transparency & solid mode

Every glass surface reads --lucent-glass-opacity (0.60–1.0). Dial it at runtime with setGlassOpacity(), or switch to setContrast('solid') for a fully opaque, high-contrast rendering. See Transparency & Solid Mode.

RTL

Authored with CSS logical properties — set dir="rtl" on a parent (or the document) and layout mirrors with no JS. Toggle RTL from the glass-controls panel to preview. See RTL Support.

SSR / Next.js

Client component — ships a "use client" boundary. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.