## Counted textarea
The multi-line settings field — a CountedInput that wraps to several lines, grows from minRows to maxRows then scrolls, with the same focus-only character counter.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-counted-textarea> 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 "". Controlled text value
- placeholder: string, default —. Hint shown when empty
- maxlength: number, default 150. Character cap (settings-lab default 150); drives the focus-only counter (shows current/max). Pass `none` to drop the cap and hide the counter
- minrows: number, default 2. Rows shown at rest — the field never shrinks below this
- maxrows: number, default 5. Rows the field grows to before it scrolls internally instead of growing
- status: default | error, default default. Error recolours the border + ring and sets aria-invalid
- disabled: boolean, default false. Non-interactive; grey fill
- readonly: boolean, default false. Selectable but not editable; secondary fill
- borderless: boolean, default false. Drop the field's own border/ring/fill — for composing inside a parent that carries the one border (OptionRow, SETTINGS-34)
- input: CustomEvent<{value}>, default —. Composed event on each keystroke; read e.detail.value
- change: CustomEvent<{value}>, default —. Composed event on commit (blur)
Tokens: border, border-hover, color-primary, bg-container, bg-container-secondary, bg-container-disabled, text-default, text-tertiary, text-disabled, radius-default, focus-ring-soft, border-error, color-error, border-disabled.
Use when: Counted textarea (a multi-line settings field — a description, a long answer — that needs a character cap; the counter appears only on focus); Counted input (the single-line sibling — option/answer/label text with a cap); Input (a general single-line field with no counter (names, search)).