# Option row
> Generated from option-row.contract.json — do not edit by hand.

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.

Surfaces: editor, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | string | `""` | The option text |
| `placeholder` | string | `Option text` | Empty-field hint |
| `maxlength` | number | `—` | Character cap — turns the focus-only counter on |
| `orderable` | boolean | `false` | Show the drag handle (order carries meaning) — omit for an unordered set (SETTINGS-39) |
| `correctable` | boolean | `false` | Show the leading correct-answer checkbox (scored types) |
| `correct` | boolean | `false` | Whether this option is marked correct — paints the whole card success-green + fills the toggle |
| `checkboxShape` | circle | square (attr checkboxshape) | `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) | `false` | Single-line answer — blocks Enter (no newline) and trims the value on blur |
| `image` | boolean | `false` | Show the per-option image control |
| `imagestate` | empty | loading | filled | `empty` | The image control's state |
| `imagesrc` | string | `—` | The image thumbnail URL when filled |
| `candelete` | boolean | `true` | false disables the delete at the minimum item count |
| `input / correct-change / delete` | CustomEvent | `—` | Composed events; image-add/change/edit/delete are forwarded from the image control |

## Visual standard (measured)
- Row: the ONE border — 1px #E3E3E3, radius 8; field inside is borderless (no double border)
- Drag handle: system-drag, FIRST child inside the border; shown only when order matters (orderable)
- Text: borderless counted textarea — focus-only counter, wraps, scrolls beyond ~4 lines (SETTINGS-21)
- Correct toggle: optional (correctable), scored types only — 20px circle (default) or radius-6 square; fills --aha-color-success with a white tick when correct
- Correct card: when correct the WHOLE row paints success-green: --aha-color-success border over a faint --aha-bg-positive tint fill
- Single line: singleLine → Enter never inserts a newline; value is trimmed on blur (single-line answers)
- Image: optional per-option ImageActionButton (image) — the full state set (SETTINGS-22)
- Delete: floats -14px OUTSIDE the top-right, hover-only, disabled (not hidden) at min (candelete=false)
- Focus: focus-within → #6A1EBB row border + ring (success-green ring when correct), on the one persistent border

## When to use
- **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)

The row is the one border; the field inside is borderless — never a box-in-a-box (SETTINGS-34). The drag handle lives INSIDE the border and only when order matters (SETTINGS-39). The delete is hover-only and disables (not hides) at the minimum count (SETTINGS-23). No "X of Y" counter — the +Add disables at max and delete at min (SETTINGS-36).