Default, focus, error, disabled — every input field has the same four states, and most design systems only ever style the first one.
The other three get invented on the spot, differently, every time someone builds a new form. One screen flashes a red border on error. Another just changes the label text and leaves the border alone. A third form doesn't handle disabled at all — the field just looks the same but stops responding, which reads as broken rather than intentional.
None of this is a design failure so much as a token gap: nobody named the other three states, so nobody had anything consistent to reach for.
The fix is the same pattern as any other token category. Name four values — `input-border` for the resting state, `input-border-focus` for active editing, `input-border-error` for failed validation, `input-bg-disabled` for anything not editable — and reference them everywhere an input appears, instead of writing a new color decision per form.
Once that's in place, border color and weight alone can carry the entire meaning. A user doesn't need a tooltip to know a field is locked, and they don't need to guess whether red means "required" or "wrong" on this particular page, because it means the same thing on every page.
Leave a Reply
You must be logged in to post a comment.