Radio Group

A radio group is a field control for choosing exactly one value from a short list of mutually exclusive options on the page — matching Figma Radio button Examples (group label + several radio inputs + validation copy).

Overview

Pass options (array of { value, label?, … }) and bind modelValue as a single selected value.

catnip-radio-group also provides:

• Field label (prop or label slot), required / optional markers, info tooltip
• supporting-text below the group (validation, hints)
• role="radiogroup" with aria-labelledby / aria-describedby wiring

Use a single catnip-radio when you only need one option rendered without a field group. Use catnip-dropdown for long lists in a compact panel.

Per-option errors

Set intent and supportingText on each options row for row-level validation. Set intent and supporting-text on the radio group for group-level copy. The live example shows Option A in danger with supporting text.

See Guidelines — Validation for a dynamic pattern.

Live example

Related

• Radio — Overview — one standalone option
• Inputs overview — shared label and supporting-text props