Radio Group

A group context for radio buttons. Use the high-level RadioGroup for a labelled list of options, or RadioGroupRoot with individual Radio items for custom layouts.

High-level wrapper

Deployment target

ProductionStagingPreviewLocal

import { RadioGroup } from "@brijbyte/agentic-ui/radio-group";
import "@brijbyte/agentic-ui/radio.css";
import "@brijbyte/agentic-ui/radio-group.css";

export default function HighLevelDemo() {
  return (
    <RadioGroup
      label="Deployment target"
      defaultValue="production"
      options={[
        { value: "production", label: "Production" },
        { value: "staging", label: "Staging" },
        { value: "preview", label: "Preview" },
        { value: "local", label: "Local", disabled: true },
      ]}
    />
  );
}

Composed: RadioGroupRoot + Radio

HobbyProEnterprise

import { Radio } from "@brijbyte/agentic-ui/radio";
import { RadioGroupRoot } from "@brijbyte/agentic-ui/radio-group";
import "@brijbyte/agentic-ui/radio.css";
import "@brijbyte/agentic-ui/radio-group.css";

export default function ComposedDemo() {
  return (
    <RadioGroupRoot defaultValue="pro" name="plan" aria-label="Billing plan">
      <Radio value="hobby">Hobby</Radio>
      <Radio value="pro">Pro</Radio>
      <Radio value="enterprise">Enterprise</Radio>
    </RadioGroupRoot>
  );
}

API Reference

RadioGroup

base-ui docs ↗

Prop	Type	Default
options*	`RadioOption[]`	—
The options to render. Each becomes one `<Radio>` item.
label	`ReactNode`	—
Accessible group label rendered above the options.
value	`string`	—
Controlled selected value.
defaultValue	`string`	—
Initial selected value (uncontrolled).
onValueChange	`((value: string, eventDetails: unknown) => void)`	—
disabled	`boolean`	—
readOnly	`boolean`	—
required	`boolean`	—
name	`string`	—
HTML name for form submission.
className	`string`	—

Styled Parts

base-ui docs ↗

Pre-styled wrappers around the corresponding base-ui parts. All base-ui props are forwarded.

CSS Class Names

Available as keys on the RadioGroupStyles object. Each key maps to a hashed CSS module class name at runtime.

groupgroup-label