Forms

RadioGroup.

One clear choice from a set of possibilities.

Accent

Glow intensity

DisabledReduced motion

tsx

import { RadioGroup } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <RadioGroup
      label="Plan"
      name="plan"
      defaultValue="pro"
      options={[
        { value: "starter", label: "Starter" },
        { value: "pro", label: "Pro" },
        { value: "enterprise", label: "Enterprise", disabled: true },
      ]}
    />
  );
}

Installation

bash

npm install luminescent

Import luminescent/style.css once at your application root. The example above uses the same package implementation as Storybook.

Variants and states

Use the preview controls to explore the supported variants, sizes, disabled/loading states and reduced motion. Controls appear only where the component exposes the corresponding prop. Theme and glow apply to every component.

Controlled and uncontrolled state

State contract: value / defaultValue / onChange (string). Omit the controlled prop to let the component own its initial state; supply a value and callback when your application owns it. Native uncontrolled fields and state-backed form controls participate in form reset. Controlled state must be reset by the application.

tsx

import { useState } from "react";
import { RadioGroup } from "luminescent";


export function ControlledExample() {
  const [value, setValue] = useState("pro");
  return (
    <RadioGroup
      label="Plan"
      value={value}
      onChange={setValue}
      options={[
        { value: "starter", label: "Starter" },
        { value: "pro", label: "Pro" },
      ]}
    />
  );
}

API reference

Generated from the source TypeScript interfaces. Native attributes, className, style, aria-* and data-* also pass through to the documented element. Import RadioGroupProps from the package for the full inherited contract.

Prop	Type	Details
`options`required	`RadioOption[]`	Optional unless marked required.
`value`	`string`	Optional unless marked required.
`defaultValue`	`string`	Optional unless marked required.
`onChange`	`(value: string) => void`	Optional unless marked required.
`name`	`string`	Optional unless marked required.
`label`	`string`	Optional unless marked required.
`disabled`	`boolean`	Optional unless marked required.
`required`	`boolean`	Optional unless marked required.
`readOnly`	`boolean`	Optional unless marked required.
`form`	`string`	Optional unless marked required.
`glowColor`	`GlowColor`	Optional unless marked required.
`layout`	`'vertical' \| 'horizontal'`	Optional unless marked required.
`indicatorAnimation`	`'slide' \| 'fade'`	Preserved appearance option; transitions respect reduced motion.

Accessibility and keyboard

Native radio arrow keys select within one uniquely named group. Tab enters/leaves the group; disabled options are skipped. One callback per change. Provide a label or aria-labelledby. Explicit names are intentionally shared only when representing the same form field.

Keep labels meaningful and test application-level contrast, focus order and screen-reader output. See the accessibility guide for composition requirements.

Theme customization

tsx

import { LuminescentProvider, RadioGroup } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <LuminescentProvider theme="light" accent="violet" glow="subtle">
      <RadioGroup
        label="Plan"
        name="plan"
        defaultValue="pro"
        options={[
          { value: "starter", label: "Starter" },
          { value: "pro", label: "Pro" },
          { value: "enterprise", label: "Enterprise", disabled: true },
        ]}
      />
    </LuminescentProvider>
  );
}

Switch between light and dark in the preview, or open the playground for a larger workspace. Custom CSS variables can override spacing, color, typography and effects.