Required Form Fields </>

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.

Another alternative would be to not indicate required fields but handle missing required input with error messages.

What problem does the pattern solve?

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.

JQuery 1.11.3 in use.

Useful links

Example images (5 examples)