Key insights
- A text field has six states — default, focus, error, success, disabled, and loading — and each needs an explicit design. Forget one and it becomes a bug in production.
- At rest, keep the label outside the field with helper text below it. A placeholder-as-label vanishes the moment someone starts typing.
- On focus, make the active target obvious with a focus ring of at least 3:1 contrast. A soft blue glow looks pretty but fails accessibility checks.
- For errors, combine color + icon + message together — a border-only red is invisible to the ~12% of users with color-vision deficiency. Name what's wrong and how to fix it.
- Confirm success inside the field, where the user's attention already is. Toasts steal focus and disappear before they're read.
- Keep disabled and loading visually distinct: disabled uses a grayscale fill with a not-allowed cursor, while loading shows an in-field spinner and blocks input to prevent double submits.
Do / Don't
- Do: Place the label above the field and helper text below, so nothing disappears on input
- Do: Signal every error with color, an icon, and a written message at once
- Do: Disable the input and show a spinner during async checks to stop double submits
- Don't: Use a placeholder as the label — it vanishes as soon as typing begins
- Don't: Rely on a border-only red for errors; roughly 12% of users won't perceive it
- Don't: Fake a disabled state with opacity 0.5 — it reads as a loading state instead
