I can restrict the input on the front-end to certain values or make it match a regex pattern, but the user might be confused about why they can't input certain values unless it's communicated to them in some way what the input restrictions are.

I could try to add a specific explanation about form fields that seem out of the ordinary as far as their restrictions go, but is there a common pattern that's used to communicate the constraints on an input field? Do I just explain the format in a placeholder for the input? Should I display some formatting message in small text below the input? Is there an established convention for this sort of thing?

For example, if I want to show the valid input formats for password fields or for phone/email inputs how should I do that?

  • 2
    That would almost certainly depend on the type of input, so you might want to narrow the focus of the question so it can be answered more easily. If you are looking for general guidelines around this, most of the popular design systems (Google, Microsoft, Apple, IBM) will have some suggestions.
    – Michael Lai
    Jun 17 '20 at 0:21
  • 1
    I agree with @MichaelLai. Also think about why you need to restrict your users input freedom. This is something you will want to reduce to a minimum. Often it is possible to use clever formatting filters that read the right values before it goes into validation. Also the best way to give the user some formatting guidance, show this between the label and the input, then it can't be missed!
    – jazZRo
    Jun 17 '20 at 8:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.