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
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
