(m)Default Label

< (m)Fields/Forms

Overview

Default labels are made up of a default field and an H4 heading (Label) that allow users to enter free text into a form.

Use of this pattern

• This label should be used as a default indication that required information is needed from the user.
• You may emphasis the content needed with the default lightly greyed and italic copy.
• Only ask for the information you absolutely need.
• All form fields should be given labels.
• Labels should be aligned above their fields.
• Label text should be short, direct and in sentence case.

How it works

• A user may click or tap on the field box to enter the required information.
• On tapping/clicking the field box or label the box will highlight and a cursor will appear removing the lightly greyed, italic copy ready for input from the user.
• Once the user has input their content they may choose to remove the whole content to start again if needed by selecting the cross/cancel button that will appear once a character has been inputted.
• Users may also choose to use backspace to delete character by character.
• Use hint text for supporting contextual help, this will always be shown below the label and should be short, direct and to the point information on the field box.
• Ensure there is sufficient spacing (20px) between form elements.

Research on this pattern

• https://paper.dropbox.com/doc/Text-boxes-8NLlgz9tjR8OzTz2N9wE3
• https://paper.dropbox.com/doc/Required-and-optional-fields-gmHL1zCOzH1KTnbuFmOUy

Related patterns

Other