Usage

Effective form labeling helps users understand what information to enter into a form input. Using a placeholder text as a label is often applied as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.

Principles

Clear text labels

“Clear labels makes users feel more confident that they are understanding things in the right way, and taking the right actions.”

The users wants to know what kind of data to enter in an input field and clear label text is one of the primary ways to tell them that. Of course there are situation when users can rely on icon in order to figure out the meaning of the field (e.g. users recognize a magnifying-glass icon as meaning "search" even without a textual label), but in most cases you should provide clear, always visible labels for each input field.

Short text labels

Labels are not help texts. You should use succinct, short and descriptive labels (a word or two) so users can quickly scan it. If extra information, clarification or context is required use help text to do this rather than long rambling labels.

Do not use long label texts. If you need to add more clarification, use help texts
Use short, succinct labels
Labels should not be truncated. Keep it short, clear and fully visible.
Label text should not span multiple lines.

Optional and required field

To indicate that a field is required, display an asterisk (*) next to the label text and mention near the form that asterisks indicate required fields.

  • If some fields are required, indicate all required ones
  • If most fields are required, indicate optional fields by displaying the word "optional" in parentheses next to the label text
  • If required text is colored, that color should also be used for the asterisk
Optional field
Required field with asterix

Avoid CAPS labels

You should never use all CAPS, or else the labels would be difficult to read and much harder to quickly scan, as there are no differences in character height any more.

UPPERCASE text is harder to read because the shapes of all the uppercase letters are all rectangular and users are not used to reading text that way.

Do not use CAPS in labels
Use normal text transforms on labels
Edit this section, Opens in new window

Behaviours

Modifiers

Tooltip

Vilket år blev/blir du ägare?
With tooltip
Edit this section, Opens in new window

Anatomy

Input-label
Edit this section, Opens in new window
Contact us, Opens in new window