## Counted input
A single-line settings field whose character counter shows only while the field is focused and is hidden at rest — the shared CountedInput pattern for option/answer text.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-counted-input> 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 100. Character cap (settings-lab default 100); drives the focus-only counter (shows current/max). Pass `none` to drop the cap and hide the counter
- size: small | default | large, default default. Control height — small 24 · default 32 · large 40; radius stays 8
- 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
- input: CustomEvent<{value}>, default —. Composed event on each keystroke; read e.detail.value
- change: CustomEvent<{value}>, default —. Composed event on commit (blur/enter)
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 input (a settings option/answer/label field that needs a character cap — the counter appears only on focus); Counted textarea (the same, but multi-line (descriptions, long answers)); Input (a general single-line field with no counter (names, search)).