Guardrails / constrained input

Shaping the input so invalid answers are impossible to enter, instead of accepting garbage and scolding the user afterwards.

stop them entering something wronggrey out what they can't pickmake it impossible to type the wrong thingdisable the invalid optionsinput guardrailsform input constraintsconstrained inputdate picker instead of a text box

See it

Live demo coming soon

What it is

Guardrails prevent the invalid state instead of catching it. Rather than accepting any string and then explaining what was wrong, you shrink the input so the wrong answer cannot be expressed: a date picker with past dates disabled, a quantity stepper capped at stock, a select instead of a text field, a slider bounded by the plan's limits. Nielsen files this under error prevention, and it beats good error messages every time.

Use it when the valid set is small, knowable, and stable. Use plain validation when the valid set is large or fuzzy (names, addresses, free text), because a constraint you got wrong becomes a wall the user cannot climb. This is the origin of every 'my surname has an apostrophe and your form hates me' bug.

Gotcha: a disabled control with no explanation is hostile. A native 'disabled' button drops out of normal keyboard interaction, which means it cannot reliably host its own explanation: the tooltip you hung on it may never open for the person who most needed to read it. Put the reason in visible text beside the control, or, if people really do have to land on it, use a focusable control marked 'aria-disabled' that blocks activation in code and explains the block when someone tries.

Ask AI for it

Rebuild this form to prevent invalid input rather than validate it after submit. Constrain every value whose valid set is small, knowable, and stable: a date picker with out-of-range dates unavailable, a numeric stepper with min and max, a select for a finite option set, a slider bounded by the plan limits, plus an input mask where the format is genuinely fixed. Leave names, addresses, and free text loose rather than guessing a pattern for them. When an action is temporarily unavailable, keep a short visible explanation beside it instead of hiding the reason in a tooltip. If users need to be able to focus the unavailable control, mark it 'aria-disabled', prevent activation in code, and keep it in the normal tab order rather than applying native 'disabled'.

You might have meant

inline validationerror preventionforgiving formatsmart defaultsaffordance

Go deeper