Back to Input Label-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

Bundle

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/Input Label@14.1.0

Table of Contents

Edit this section, Opens in new window

Usage

Markup

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

With label wrapper

<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>

Required

<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>

Optional

<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>

With tooltip

Vilket år blev/blir du ägare?
<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, Opens in new window

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>
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

13.5.1 (2021-09-07)

Bug Fixes

  • 🐛 Finalize data-size issue (f7f9f55), closes #374144
  • 🐛 Reduce specificity on selectors (3affc48)
  • 🐛 Use a more logical approach for data sizes (5cd9ae9), closes #374144

12.13.1 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Make sure components using fonts, have fonts bundled (d5bb642), closes #354912

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring

Features

  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

Edit this section, Opens in new window
Contact us, Opens in new window