Material Design required field

  • 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.)

  • DaveAlger

    DaveAlger Correct answer

    6 years ago

    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)

    hey DaveAlger. Thanks for the response. You make good points also, and I should have been clearer that I am using MD for a very form orientated enterprise app, and as such I am not designing each form per se, but more trying to provide a best practice style guide. I agree a well designed form should only ask relevant information, but I cant ensure they will always be well designed.

    Yeah I hear ya. We try and come up with the best solution not the ideal constraints. -- I've added a bullet point to cover your situation.

    Wouldn't it better to get rid of the asterisk at all, especially with a few (“one or two”) form fields as some people still have issues understanding it's meaning and therefore leaving the fields without indicator or adding a secondary information like “Required” is preferable?

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM