## Option row
The repeatable option/answer row — one bordered row with an inside drag handle, a borderless counted textarea, an optional correct toggle (circle or square) and per-option image, and a floating hover delete; marking correct paints the whole card success-green (SETTINGS-20/34/23/39).
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-option-row> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, settings.
Props:
- value: string, default "". The option text
- placeholder: string, default Option text. Empty-field hint
- maxlength: number, default —. Character cap — turns the focus-only counter on
- orderable: boolean, default false. Show the drag handle (order carries meaning) — omit for an unordered set (SETTINGS-39)
- correctable: boolean, default false. Show the leading correct-answer checkbox (scored types)
- correct: boolean, default false. Whether this option is marked correct — paints the whole card success-green + fills the toggle
- checkboxShape: circle | square (attr checkboxshape), default circle. The correct-answer toggle shape — a 20px outline circle, or a radius-6 square; both fill success-green with a white tick when correct
- singleLine: boolean (attr singleline), default false. Single-line answer — blocks Enter (no newline) and trims the value on blur
- image: boolean, default false. Show the per-option image control
- imagestate: empty | loading | filled, default empty. The image control's state
- imagesrc: string, default —. The image thumbnail URL when filled
- candelete: boolean, default true. false disables the delete at the minimum item count
- input / correct-change / delete: CustomEvent, default —. Composed events; image-add/change/edit/delete are forwarded from the image control
Tokens: border, border-hover, color-primary, color-success, border-success, color-error, bg-container, bg-positive, bg-elevated, text-disabled, text-inverse, icon-muted, checkbox-border, radius-default, radius-sm, radius-pill, focus-ring-soft, btn-focus-ring-success, ink-a10.
Use when: Option row (a slide type's option / answer list — the "Items" list (SETTINGS-20)); Numbered item (a repeatable COMPOSITE item with its own body of fields (a Question)).