(m)Selection Label

< (m)Fields/Forms

Overview

Selective labels are made up of a select field (drop down) and an H4 heading (Label).

Use of this pattern

• Avoid using select labels if possible (drop-down lists) - use radio buttons or checkboxes instead.
• This label can be used for optional or required information but will either need the required asterisk or 'optional' on their labels.
• You can emphasis the content that may be needed with the default lightly greyed and italic copy.
• If you do ask for optional information, mark the labels of optional fields with ‘(optional)’.
• If the label is priority it should indicate that required information is needed from the user with an asterisk.
• 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 selector to select the required information.
• On tapping/clicking the field selector 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

Related patterns

Other