Zentauri UILibrary

Forms

Radio groups for exclusive choices

RadioGroup coordinates a set of radio items so people can choose exactly one option. Zentauri UI provides a compound RadioGroup API with shared value, name, required, orientation, size, appearance, and animated indicator support.

StarterProEnterprise

Examples

The animated entrypoint adds a small spring to the selected radio indicator while keeping native radio inputs underneath.

DailyWeeklyMonthly

CSS variable overrides

RadioGroup CSS variables

Override these radio group variables on :root, a theme selector, or a component wrapper.

27 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-radio-label-fg: oklch(20.8% 0.042 265.755);
  --zui-radio-border: #0000004d;
  --zui-radio-bg: transparent;
  --zui-radio-ring-focus: oklch(44.6% 0.043 257.281 / 0.7);
  --zui-radio-ring-offset-focus: oklch(98.4% 0.003 247.858);
  --zui-radio-default-border-checked: oklch(44.6% 0.043 257.281);
  --zui-radio-default-indicator-bg: oklch(44.6% 0.043 257.281);
  --zui-radio-success-border-checked: oklch(59.6% 0.145 163.225);
  --zui-radio-success-indicator-bg: oklch(59.6% 0.145 163.225);
  --zui-radio-warning-border-checked: oklch(68.1% 0.162 75.834);
  --zui-radio-warning-indicator-bg: oklch(68.1% 0.162 75.834);
  --zui-radio-error-border-checked: oklch(58.6% 0.253 17.585);
  --zui-radio-error-indicator-bg: oklch(58.6% 0.253 17.585);
  --zui-radio-info-border-checked: oklch(54.6% 0.245 262.881);
  --zui-radio-info-indicator-bg: oklch(54.6% 0.245 262.881);
  --zui-radio-violet-border-checked: oklch(54.1% 0.281 293.009);
  --zui-radio-violet-indicator-bg: oklch(54.1% 0.281 293.009);
  --zui-radio-amber-border-checked: oklch(66.6% 0.179 58.318);
  --zui-radio-amber-indicator-bg: oklch(66.6% 0.179 58.318);
  --zui-radio-pink-border-checked: oklch(59.2% 0.249 0.584);
  --zui-radio-pink-indicator-bg: oklch(59.2% 0.249 0.584);
  --zui-radio-indigo-border-checked: oklch(51.1% 0.262 276.966);
  --zui-radio-indigo-indicator-bg: oklch(51.1% 0.262 276.966);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-radio-label-fg-dark: oklch(98.4% 0.003 247.858);
  --zui-radio-border-dark: #ffffff4d;
}

What it does

Coordinate exclusive selection across related radio items.

Use RadioGroup when exactly one option should be selected from a known list.

Composition and API

Use RadioGroup as the root and RadioGroupItem for each option. The root owns value, defaultValue, onValueChange, orientation, size, appearance, required, and disabled state.

Common use cases

Plan selection in pricing and billing flows.
Single-choice survey questions.
Delivery or payment method selection.
Settings where one mode must be active.

Accessibility

The component renders a radiogroup wrapper and native radio inputs. Provide an aria-label or external label for the group, and keep each item label clear.

Next.js integration notes

Keep controlled RadioGroup examples in client components. Use defaultValue for simple server-rendered defaults in App Router pages.

FAQ

Does RadioGroup manage exclusive selection?

Yes. RadioGroupItem components receive the group name and selected value from context, so only one item in the group is selected.

Can RadioGroup be horizontal?

Yes. Set orientation="horizontal" on RadioGroup for compact rows of options.

Is there an animated RadioGroup?

Yes. Import RadioGroupAnimated and RadioGroupItemAnimated from the animated entrypoint for a spring or fade selected indicator.