## Input
A single-line text field — names, search, numbers, short free text — with sizes, error/warning status, affixes, a clear ✕ and a password reveal.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-input> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- value: string, default "". Controlled text value
- placeholder: string, default —. Hint shown when empty
- type: text | number | email | password | search, default text. Native input type; password adds a reveal (eye) toggle
- size: small | default | large, default default. Control height — small 24 · default 32 · large 40 (DS V3 field scale); radius stays 8 (sm/md/lg accepted as aliases)
- status: default | error | warning, default default. Border + ring recolour; error also sets aria-invalid (legacy `invalid` boolean = status error)
- disabled: boolean, default false. Non-interactive; grey fill
- readonly: boolean, default false. Selectable but not editable; secondary fill
- prefix-icon / prefix: string, default —. Leading affix — an icon by name (from the DS library) or plain text
- suffix-icon / suffix: string, default —. Trailing affix — an icon by name or plain text (e.g. a domain)
- clearable: boolean, default false. Shows a ✕ when non-empty that wipes the value and emits `clear`
- input: CustomEvent<{value}>, default —. Composed event on each keystroke; read e.detail.value
- clear: CustomEvent<{value}>, default —. Composed event when the ✕ clears the field
Tokens: border, border-hover, color-primary, bg-container, bg-container-secondary, bg-container-disabled, bg-hover, text-default, text-tertiary, text-disabled, radius-default, radius-sm, focus-ring-soft, border-error, color-error, border-warning, color-warning, border-disabled.
Use when: Input (short single-line free text — a name, a search term, a number); Textarea (multi-line free text (descriptions, messages)); Select (one value from a known set — don't make the user type it).