RadioGroup

A fieldset of card-style radio rows where one highlight glides to the chosen option.

When to use

• One choice from 2 to 6 options that benefit from being visible together, especially with descriptions (plans, modes, lengths).
• For a compact inline switch between views use SegmentedControl; for long lists use Select.

Usage

import { RadioGroup } from "@/components/iris/radio-group/radio-group";
function Plan() {
  const [plan, setPlan] = React.useState("ship");
  return h(RadioGroup, {
    label: "Plan",
    value: plan,
    onValueChange: setPlan,
    options: [
      { value: "vibe", label: "Vibe", description: "$3.99/mo, one project, 2 GiB of storage." },
      { value: "ship", label: "Ship", description: "$15.99/mo, 3 projects, 7-day restore." },
    ],
  });
}

Props

Prop	Type	Default	Description
label	string	required	Rendered as the fieldset legend.
options	{ value: string; label: string; description?: string }[]	required	The rows.
value	string	required	Selected value (controlled).
onValueChange	(value: string) => void	required	Called with the new value.
name	string	generated	Native radio name, for form submission.

Notes

• Uses native input type="radio", so arrow keys and form submission work as usual.
• The highlight springs between rows (spring.morph) and the dot pops in; reduced motion places both instantly. Before hydration the checked row is styled by CSS so there is no flash.
• Reads --control-on, --control-glyph, --line, --line-strong, --radius-control.