# Input
> Generated from input.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | string | `""` | Controlled text value |
| `placeholder` | string | `—` | Hint shown when empty |
| `type` | text | number | email | password | search | `text` | Native input type; password adds a reveal (eye) toggle |
| `size` | small | default | large | `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` | Border + ring recolour; error also sets aria-invalid (legacy `invalid` boolean = status error) |
| `disabled` | boolean | `false` | Non-interactive; grey fill |
| `readonly` | boolean | `false` | Selectable but not editable; secondary fill |
| `prefix-icon / prefix` | string | `—` | Leading affix — an icon by name (from the DS library) or plain text |
| `suffix-icon / suffix` | string | `—` | Trailing affix — an icon by name or plain text (e.g. a domain) |
| `clearable` | boolean | `false` | Shows a ✕ when non-empty that wipes the value and emits `clear` |
| `input` | CustomEvent<{value}> | `—` | Composed event on each keystroke; read e.detail.value |
| `clear` | CustomEvent<{value}> | `—` | Composed event when the ✕ clears the field |

## Visual standard (measured)
- Box: height 32 (default) · radius 8 · padding 0 12
- Sizes: small 24 · default 32 · large 40 — all radius 8
- Rest border: 1px #E3E3E3
- Hover border: #D3B4FF (purple-30)
- Focus: #6A1EBB border + 2px #D3B4FF@30% ring (on the persistent wrapper)
- Error: #F5222D border + error-tinted ring; sets aria-invalid
- Warning: #FF7747 border + warning-tinted ring
- Disabled: #F1F1F1 fill, #EBEBEB border, not-allowed
- Readonly: #F7F7F7 fill, still selectable
- Affixes: prefix/suffix icon (by name) or text; clearable ✕; password reveal (eye)
- Text: Plus Jakarta 14/21; placeholder #8A8A8A

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

Label the field with a noun phrase; use placeholder for an example, never as the label. Show the error status only after the user leaves the field, and pair it with a message that says how to fix it. Reach for a prefix icon to hint the field's job (a magnifier for search, an envelope for email), a suffix for a fixed unit or domain, clearable for search/filter fields, and password reveal for credentials.