## Mode field
A labelled field with an inline exclusive mode control whose body swaps in place — the settings field for a control that has two-or-more mutually-exclusive modes.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-mode-field> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, settings.
Props:
- label: string, default —. The field label, left of the mode control
- options: Array<{value,label,icon?}>, default []. The exclusive modes; set as a property or a JSON attribute (alias: modes)
- value: string, default —. The active option's value (alias: mode)
- variant: 'radio' | 'segmented', default 'radio'. radio = outline segmented (brand border, white fill); segmented = neutral grey
- labelVariant: 'field' | 'section', default 'field'. field = regular weight; section = semibold header for a grouped-list body (attr: label-variant)
- help: string, default —. When set, a "?" tooltip after the label (icon system-question-mark)
- disabled: boolean, default false. Non-interactive; grey buttons
- change: CustomEvent<{value}>, default —. Composed event on change; read e.detail.value (e.detail.mode is a back-compat alias)
Tokens: border-strong, border-hover, border-disabled, color-primary, bg-container, bg-container-disabled, gray-20, gray-100, text-default, text-secondary, text-tertiary, text-disabled.
Use when: Mode field (a single setting whose control has 2+ exclusive modes and a mode-specific body (automatic vs manual, value-source A vs B)); Segmented (an exclusive choice with NO mode-specific body to swap); Switch (a plain immediate on/off with no modes).