Material Design required field

Question

Has anyone seen in Material Design how to present a required field? At the moment it seems the guideline is either to hide the submit button until required fields are populated or else throw an error on submit.

I have seen an example where "required" was written in brackets beside the field, and also an example where "not required" was written, but this is a bit underwhelming.

Does one just go with the good old red asterisk in the label? (In this case, it is prompt text and would be turned into the label when the field is populated.)

Answer 1

How you choose to mark fields as required is not a part of material design.

You've already noticed that some applications choose to use the validation error "This field is required" after the fact while others choose to do it another way.

• Regardless of how you choose to indicate required fields be sure to give some sort of immediate feedback to the user when they have entered valid information.

• If you only have one or two required fields then using a red asterisk is perfectly acceptable, however, using a more explicit (required) text as part of the field name is more clear assuming you have the space for it.

• If you only have one or two optional fields then you can add the word (optional) in parenthesis as part of the field label though it really isn't necessary especially in the optional case.

• If you have no control over changing the inputs on the forms and need a single consistent pattern then I would say putting (required) next to all but one input is better than putting (optional) next to all but one input.

---

Consider only asking for required information

Progressive disclosure tells us that it's better to only gather mandatory information up front and then allow users the option of adding additional (optional) information later.

As a designer I treat every input field as a barrier to entry. In other words, if it doesn't have to be there then why am I asking for it in the first place? Pretty much all inputs should be required except in rare cases where having the option adds value to the user even though the job can be done without it. (for example, description or additional info fields)

Answer 2

I'm not sure when this section was added, but currently, the specs do have a short section about required fields:

To indicate that a field is required, display an asterisk (*) next to the field. At the bottom of the form, include a note explaining that an asterisk indicates a required field.

Answer 3

Material design is silent on required fields. However, the Material Design documentation shows this interaction example for a required field:

Additional suggestions:

• I am not a fan of the asterisk because it doesn't communicate 'required' clearly and can cause anxiety or frustration with users, especially if no tooltip or legend is provided.

• Material design uses colors to communicate field status (focused, disabled, erroneous, etc) so color is not a great way to distinguish a required field because it may overload the onscreen palette.

• Material design makes extensive use of clear placeholders (as in the examples above), so the logical way to denote a required field is to use First name (required) in the placeholder text. That places the requirement next to the field description, and doesn't rely on any ambiguous signifiers or colors.

Answer 4

It surprises me that Material Design's solution to a required field is a slap-on-the-wrist after failing to fill it in rather than letting the user know ahead of time. It reminds me of those sites that yell at you after you choose an ill-formed password without telling you ahead of time which highly specific format is required: anger-inducing, as well as time-wasting.

I, like Stephen, am working with a form-driven site, in my case for an insurance company, and a given page can easily have 20+ fields. (Ever gone through a home quote?) Some fields are not required. I'd love to get rid of them, but they are part of a business requirement.

Putting "(required)" at the end of the hint text each required field makes the form appear absolutely littered by them. I ended up preceding the hint text of required fields with the asterisk, and keeping the asterisk around after the hint text goes away upon entry. Looks decent, and - more importantly - tests well.

Also, if a specific format is required for entry, I do what MD does after the user makes a mistake (pictured in the thread above), but I also display the same message upon focus, using the focus color for the text instead of red. Works out nicely.