Radio Group

A single-choice group in two shapes, measured from a settings picker. The default is a column of rows (a 16px ring that fills brand when selected + a label); the card variant is a row of bordered preview cards whose border turns brand (#266df0) when picked — an appearance Theme selector. Arrow keys move between options (roving focus).

Installation

npm install @crisp-ui-kit/crisp

Props

RadioGroup

Radio

Notes

• Semantics. A role="radiogroup" wrapping role="radio" buttons with aria-checked; roving tabIndex (only the selected radio is tabbable) and ↑/↓/←/→ move + select, matching the native radio pattern.
• Card variant. Each card is a bordered container (radius 16) that renders your preview as children and a footer with the ring + label; the border turns brand when selected.