Also known as: Mandatory Form Fields.
What
Clearly indicate required or optional fields on a form.
Example image
HaveAMint.com: A green required-tag next to label indicates the form field is required.
Etsy.com indicates optional form fields instead of required fields, which makes the form cleaner.
Use when
All of the fields are not required.
Indication of required form fields
- Most of the fields are optional
Indication of optional form fields
- Most of the fields are required
Why
- User needs to know which fields are required and which are optional to see what needs to be filled in.
How it works
- First of all, keep the form simple - Don’t ask users to provide useless information.
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 the form fields are required
- Use text to indicate optional fields.
An alternative way is to group required and optional fields in different groups.
History
The first version (1.0) was created on January 30, 2008 by Janne Lammi.
Pattern Gallery
Show Your Pattern Examples Here!
Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:
More photos in Flickr group "UIPatternFactory.com" tagged with required-form-fields
Excellent guidelines; it does seem to be the best practise to indicate the exceptions, such as required fields on a mostly optional form or vice versa. If the ratio of required to optional fields is close it seems to be the standard to indicate required fields rather than optional.
The Wikipedia portion of the example image seems to go against the recommendation by using an asterisk and “(optional)” next to the form field. Wouldn’t this be confusing to the user?
Yes, you’re right about the Wikipedia example. There shouldn’t be an asterisk next to the form field, but “optional” text only to indicate it is an optional input field. However in that example the asterisk does not indicate it is required or optional; instead it refers to a note at the bottom of the form about the email address. But that you can’t see from the example pic which makes the example bad… I’ll replace it to a better example soon, thanks for your comment Mike!
Ah okay, that explains the asterisk. I guess this brings up a good question: Should an asterisk be used in a form for anything but indicating a required field? It seems better to place the note note directly under or beside the form field if possible, as many sites do.
Well in my opinion asterisks in forms should be reserved for indicating required fields only, although I don’t think Wikipedia’s way is totally evil. But that’s a good point, I’ll add a note about this this to the pattern.
showing either required / optional in two situations is excellent. what you need to show when all required / optional?
Good question Wagesh. If all form fields (in a group) are optional/required, it should be stated in the title of that group. Grouping required and optional fields in different groups is also a good alternative to indicating what is required/optional next to each input. I should add a section about this to the pattern.
?????????? ???????!!!
Thanlks
I changed example screenshots to better ones, because the old examples were a bit confusing.
I don't agree that the first is a great example of a Required field treatment from a visual design point of view. The "Required" tags/graphics are too bold. There are so many of them they take over the form so all I see is REQUIRED REQUIRED REQUIRED. Having this word only once would suffice. Or better yet, eliminate all of the fields that are not required. Thank you.
@Lucky: You're absolutely right, and I will change the example to a better one soon.