Labels

Position

Field labels may be shown above the component, adjacent to the component, or not shown at all.

Note that labels are always shown above the component in the mobile application.

images:ux_pages/ux_labelPositionDo.png images:ux_pages/ux_labelPositionDo.png

Above

The above-component label position generally works well for form input fields (like textboxes and dropdowns).

For all components, labels above are especially preferable to adjacent when:

  • The component is wide (e.g. grids & charts), since adjacent labels take up horizontal space
  • The label text is long (to avoid wrapping)

DO

DON'T

Adjacent

Show labels adjacent to the component when:

  • Displaying non-editable values, such as record attributes (to enhance visual grouping of labels vs. values, especially when some of the values may be blank)
  • The interface has many fields (to minimize vertical scrolling)

DO

DON'T

Don't use the above label position for read only values. This makes reading fields with missing values difficult.

Consistency

Avoid mixing different label positions within the same interface or section as this creates an unbalanced layout.

Consider the guidelines for determining label positioning and choose the option that best balances the requirements of all fields.

DON'T

Excluding Labels

Field labels may be excluded if they would be redundant. For example, if:

  • An interface contains a single grid or chart and the page title sufficiently describes it

  • A section header label sufficiently describes a group of related fields

Be careful of the accessibility impact of excluding labels. Assistive technologies may expect a text label description of each field.

images:ux_pages/ux_labels_excluded.png

Redundant Labels

Avoid repeating words when labeling a group of related inputs.

DO

Use a section header to provide context, allowing for more concise field labels.

DON'T

Label Format

Avoid using a colon (“:”) after a field or section label.

Use consistent capitalization in labels. Title case is recommended.

DO

DON'T

Consistent Tone

Avoid using labels with a conversational tone if other labels on the form are concise and direct.

DO

DON'T

Rich Text Headers

When displaying rich text headers, use the above label position or exclude the label for proper alignment.

Field labels may be excluded if the headers are sufficient to describe or organize the content.

DO

DON'T

Use descriptive display text for link labels.

Avoid unnecessary or redundant words like “link.”

A URL should not be displayed as the link label unless there is an explicit reason for users to see the URL.

DON'T

FEEDBACK