Input
Text input field with optional label, hint, and error state
Category: inputs · WCAG 2.2-AA · form, text, input
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. |
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" />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