Components / Forms
Text Input
stableA single-line text field with a label, optional hint, and error state.
Default
We'll never share this.
States
Enter a valid email address.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | No | Field label, associated via a real <label>. |
hint | string | — | No | Helper text shown below the field when there is no error. |
error | string | — | No | Error message — replaces the hint and applies the error border. |
required | boolean | false | No | Shows a red asterisk next to the label. |
...props | InputHTMLAttributes | — | No | All standard <input> props (type, value, onChange, placeholder, etc). |
Do
- Validate on blur, not on every keystroke.
- Write a specific error message and, where possible, how to fix it.
- Show the hint by default; replace it with the error only once validation fails.
Don't
- Use a generic "Invalid input" error message.
- Rely on placeholder text as a substitute for a real label.
- Validate before the user has had a chance to finish typing.