Yugen UI

RadioGroup

RadioGroup lets people choose exactly one option from a mutually exclusive set.

A 16px circle with a stroke-accessible border; when selected, the border turns brand and a 10px brand dot appears. Unselected labels use foreground-3 and get darker on hover and when selected. Tab into the group, then use the arrow keys to change the selection.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { RadioGroup, Radio } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Horizontal layout

layout="horizontal" when there are only a few short options.

Horizontal, labels below

layout="horizontal-stacked", suited to rating scales.

Disabled

Disable a single option or the whole group.

Value: monthly

Controlled + Label

Name the group with Label + aria-labelledby.

Usage

Do
  • Use it for 2–7 mutually exclusive options that people need to see all at once.
  • Preselect the safest or most common option when it makes sense.
  • Stack options vertically when labels are long; lay them out horizontally only when labels are very short.
Don't
  • Don't use it for a single on/off choice. Use Checkbox or Switch.
  • Don't use it when there are too many options. Use Dropdown or Combobox.

Props

Prop · TypeDefaultDescription
layout"vertical" | "horizontal" | "horizontal-stacked"Default: "vertical"Group layout.
value / defaultValuestringDefault: —Selected value.
onValueChange(value: string) => voidDefault: —Called when the selection changes.
disabled / required / name / formboolean / stringDefault: —Apply to the whole group. Each Radio is a native <input type="radio"> sharing the name (generated when not set): arrow keys select the next one, the value goes with the form. A Radio's ref points to HTMLInputElement.
Radio.valuestringDefault: —Value of the option.
Radio.labelReactNodeDefault: —Clickable label.
Radio.disabledbooleanDefault: —Disables this option only.