Input
Text input field with optional label, hint, and error state
Category: inputs · WCAG 2.2-AA · form, text, input, ai
Sizes
- sm
- md
- lg
States
- idle
- focused
- error
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text label for the control (standalone use). Omit it when wrapping the Input in a Field — the Field owns the label, and setting both double-labels the control. |
hint | string | — | Supplementary hint text shown with the control. |
error | string | — | Error message shown when the value is invalid. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
placeholder | string | — | Placeholder text shown when the field is empty. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
ariaLabel | string | — | Invisible accessible name, for when a visible element outside this component already labels it and `label` would render that text a second time. ⚠ `label` on this component is **visible**; `IconButton.label`/`Sparkline.label` are invisible names, which is the prior that costs adopters a duplicated label. The raw DOM `aria-label` still wins over this. |
ai | boolean | false | AI presence: an AI-tinted border and a soft aura, marking a value AI produced or suggested. Visual only — put an AiBadge in the label so the provenance is also text, and clear `ai` once the person edits the value. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-accent--cascivo-color-destructive--cascivo-radius-input--cascivo-focus-ring
When to use
- Collecting a single line of free-form text from the user
- Pairing a labelled field with optional hint and validation error messaging
- As a field control inside a Form, wired via form.field()
When not to use
- Multi-line text — use Textarea
- Choosing from a fixed list of options — use Select, Combobox, or MultiSelect
- Editing one read-only value in place — use Editable
How to build an accessible Input in React →
Examples
With label
<Input label="Email" placeholder="[email protected]" />With error
<Input label="Email" error="Invalid email address" />AI-suggested value
<Input label="Subject" ai defaultValue="Weekly report" />Related components
- Form — Input is the primary field control wired into a Form store
- InputGroup — Wrap Input in InputGroup to add prefix/suffix addons
- Textarea — Use Textarea for multi-line input