Required Form Fields

Also known as: Required vs. Optional Form Fields

Tags: forms, inputs

Indicating clearly required or optional fields on a form tells the user what needs to be filled in to complete the form. If most of the form fields are optional, use text or asterisk (*) next to each field to indicate required fields. If you choose asterisk, provide a legend which tells the meaning of it.
If most questions on a form require an answer, indicating all required fields would add unnecessary info to the form. In this case indicate the ones that are optional using an “Optional” text next to the optional field labels.


Required form fields are marked with asterisks next to the labels, and a text explains what the asterisk indicates.

Required form fields are marked with asterisks next to the labels, and a text explains what the asterisk indicates.

What problem does the pattern solve?

You’re designing a form that contains both required and optional form fields.

When to use it?

You’re designing a form that contains both required and optional form fields.

How to use it?

  • First of all, keep the form simple. Avoid optional input fields in forms, don’t ask users to provide useless information.
  • Show the required/optional indicators next to labels instead of input fields to make it easier to scan the form through and see what information needs to be given.
If most of the form fields are optional:
  • Use text or asterisk (*) next to each field to indicate required fields.
  • If you choose asterisk, provide a legend which tells the meaning of it.
  • Consider bolding the required field label.
If most of the form fields are required:
  • Use text “(Optional)” after optional field labels to indicate optional fields.

Why to use it?

People need to know what needs to be filled in to complete the form, otherwise they will get an error if some of the required form fields are left blank.

Useful linksUseful links icon

Example images (4 examples)

Comments

  • Smart Company Software (www) Nov. 11, 2011 09:27

    I've never been a big fan of using a * to indicate that the field is mandatory. There are some good alternatives here.

  • Malli Aug. 23, 2012 13:48

    Most designers are aware of the risks of using color alone in indicating something important. The obvious risk is that it confuses people with strong color-blindness. The method - where you put a note at the top of the page that says 'Mandatory fields are marked with *' and then adding *s to labels - is old and clunky. It creates two layers of information that the user needs to go through. Also, the word 'mandatory' is too legalistic and intimidating.

    If you follow the logic that users will scan only what they need (and not some outlying notes and prompts), then by far the best way is to user the word 'required' with field-set labels or field labels.

    It is clear, to the point, and does not rely on. color

  • Smithg651 (www) May 30, 2014 09:39

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You clearly know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something enlightening to read? bdgefcgdebcafaed