Form design and labels

Design

Forms should be designed vertically as this improves their scanability. When possible, a form should be one column.

Information can be presented in multiple columns if they are grouped together (i.e. first name and last name fields).

Inputs should be grouped and sequenced in the most logical way possible. If multiple inputs are required for one grouping of information (i.e. street address, postal code, and province), these inputs should be placed in close proximity to each other.

Typically forms start with the most important or common information such as username, password, first or last name, email address, etc.

For complicated forms, information should be displayed using multiple steps or pages. If this is the case, it is important to include a progress bar throughout the form, as well as a way to navigate both forwards and backwards between steps.

Labels

Users need to be able to easily read labels and intuitively understand how the label is related to its field. Labels should use clear but concise language, and provide enough information for the user to accurately complete the required information.

If additional information is necessary beyond a label, this information should be displayed in a separate tooltip or microcopy.

Placement of Labels

Labels should follow the vertical format of the form. Place labels above their respective field. Group a label with its field so that there is a clear distinction between fields. Do not use placeholder text for labels as this prevents the user from properly reviewing the form. Labels have a bottom margin of 10px from the input field.

Text in Labels

How labels are written affects their legibility. Do not write labels in all caps as this diminishes their readability. Labels should not be the same as placeholder text, they should both be separate. Don’t use symbols to represent required content.

Required Fields

Inputs should be clearly indicated as optional or required. These indicators can be included in the label.

If most fields in the form are required, indicate only the optional fields.

If most fields in the form are optional, indicate only the required fields.

Grouping / Field Sets

To help users better understand a form, it may be useful to group inputs into categories or field sets. Field sets should be grouped visually on the page and labelled using Header 3 with a divider underneath.

Step Indicators

If possible, it is recommended to limit forms to one page. If a form has more than one page, use a step indicator.

If a form has more than one page, it is recommended to provide the user with a visual representation of progression so that they are aware of their level of completion. Styling for Step Indicators is written in its own section of this documentation.

Navigation

Navigation to different pages may be necessary to include in a form. If they are related to a specific field, for example "Forgot password?", include the link inline and underneath the related field. If the link is related to the entire form, for example "Register here", include the link at the bottom of the form in a way that is visually separate.