Skip to content

Input Label13.10.5

Bundle


$ npm i @if-design-system/Input Label@13.10.5

Edit this section

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
<form autocomplete="off" action="">
  <div class="if input-wrapper">
    <input
      data-size="larger"
      placeholder="Enter your last name"
      name="input-fields-optional-01"
      id="input-fields-optional-01"
      type="text"
      class="if input-field is-optional"
    />
    <label class="if" for="input-fields-optional-01">Last name</label>
  </div>
</form>
<form autocomplete="off" action="">
  <div class="if input-wrapper">
    <input
      data-size="larger"
      placeholder="Enter your last name"
      required
      name="input-fields-required-01"
      id="input-fields-required-01"
      type="text"
      class="if input-field"
    />
    <label class="if" for="input-fields-required-01">Last name</label>
  </div>
</form>
Edit this section

Behaviours

Modifiers

Tooltip

Vilket år blev/blir du ägare?
With tooltip
<div class="if input-wrapper">
  <input
    class="if input-field"
    name="adsadsadsadsa213213213"
    id="adsadsadsadsa213213213"
    type="number"
    data-size="small"
    placeholder="1989"
  />
  <div class="if input-label-wrapper">
    <label class="if input-label" for="adsadsadsadsa213213213"> Ägs sedan </label
    ><span class="if inline-nowrap"><button type="button" class="if help-tooltip" aria-label="Help"></button></span>
  </div>
  <span class="if input-help">
    Vilket år blev/blir du ägare?
  </span>
</div>

NOTE! To make sure that the help-tooltip does not wrap on a new line by itself, use the span class="if inline-nowrap"-element to wrap the help-tooltip.

Make sure that it is placed RIGHT after the labelwrapper, with no whitespace!

Edit this section

Accessibility

  • Labels must be visible when an input gets focus.
  • Labels must be announced to the screen reader on focus.
  • Ensure the helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.
  • Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized).

Always make sure that you have the correct attributes when used with a label:

  • id
  • name

And the label should have

  • for that MUST be equal to the input fields id-attribute
<form autocomplete="off" action="">
  <div class="if input-wrapper">
    <input type="text" value="Input field" class="if input-field" id="<identifier>" name="<identifier>" />
    <label class="if input-label" for="<identifier>">Username</label>
  </div>
</form>

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

Anatomy

Input-label
Edit this section

Specs

Edit this section

Implementation

<label class="if input-label" for="<identifier>">
  Ägs sedan
</label>

With help tooltip

<div class="if input-label-wrapper">
  <label class="if input-label" for="<identifier>"> Ägs sedan </label
  ><span class="if inline-nowrap"><button type="button" class="if help-tooltip" aria-label="Help"></button></span>
</div>
Edit this section
Contact us