## Card select
Single-select as an icon+label card grid — pick one of N options each shown as its own visual card, with roving radiogroup keyboard navigation. Two layouts: labelled tiles (stretch to fill `columns`) or compact 44px icon-only squares.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-card-select> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, settings.
Props:
- options: Array<{value,label,icon}>, default []. The cards — each an icon name + a label; set as a property or a JSON attribute
- value: string, default —. The selected option's value (single-select)
- columns: number, default 3. Grid column count — labelled tiles fill each track; iconOnly lays out that many 44px squares
- iconOnly: boolean, default false. Compact layout — fixed 44px icon squares packed to the start; the label is hidden but kept as title + aria-label
- disabled: boolean, default false. Non-interactive; grey fill
- change: CustomEvent<{value}>, default —. Composed event on selection; read e.detail.value
Tokens: border-strong, border-hover, border-disabled, color-primary, bg-container, bg-container-disabled, bg-accent, text-default, text-disabled, icon-default, radius-default.
Use when: Card select (pick one of N options, each carrying a visual (icon/preview) — a chart-type, layout or mode picker); Segmented (2–4 short text-only options in one row (SETTINGS-38)); Select (a longer or space-constrained set with no per-option visual).