Component

Radio Group

Let people choose exactly one option from a visible set, with arrow-key navigation and optional supporting copy.

Usage

Import the component entry and start with its smallest complete example.

Import

import { RadioGroup } from "@chitrank2050/monoline-ui/radio-group"

Basic usage

<RadioGroup value={plan} onValueChange={setPlan} aria-label="Billing cycle">
  <RadioGroup.Item value="monthly" label="Monthly" />
  <RadioGroup.Item value="annual" label="Annual" description="Save two months" />
</RadioGroup>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

RadioGroup presents a visible set of mutually exclusive choices where comparing options before selection is useful.

Avoid when

People may select several options, or a long option list would be easier to scan in a compact Select.

Accessibility

RadioGroup provides radio roles and arrow-key navigation. Give the group an accessible label and use each item's label prop or an explicitly associated label.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

valuestringControlled selected value

defaultValuestringInitial uncontrolled value

onValueChange(value) => voidRuns when selection changes

RadioGroup.Itemcompound slotChoice with optional label and description

Design tokens

Theme variables this component reads for color, spacing, and motion.

--accentCSS varSelected indicator and control border

--border-strongCSS varControl border

--text-mutedCSS varSupporting copy

Implementation

The source used by the example above, including any state it needs.

<RadioGroup value={plan} onValueChange={setPlan} aria-label="Billing cycle">
  <RadioGroup.Item value="monthly" label="Monthly" />
  <RadioGroup.Item value="annual" label="Annual" description="Save two months" />
</RadioGroup>

Compare related components or review the package and theme setup.

01ComponentFieldComponent · ReferenceReference→02ComponentCheckboxComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview