Deprecated - contains information about version 17 of the IDS librarySeedesign.if.eufor the latest documentation
Back to Input Label-guidelines

CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, 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.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-core/Input Label@17.0.30-alpha.8
Preview

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
    >
</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
        >
    </div>
    <span class="if input-help"> Vilket år blev/blir du ägare? </span>
</div>

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

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.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Bug Fixes

  • 🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

  • 🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

14.8.0 (2022-02-21)

Bug Fixes

  • 🐛 Use correct indentation to ensure correct selector (8d53f75)

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

  • use correct versions (f1b5deb)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

14.2.7 (2022-01-18)

Bug Fixes

  • Use correct scope for renaming (0fdf54e)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

  • 💡 Change focus styles, remove whatinput (75fd31b) , closes #505205

14.2.0 (2021-12-08)

Bug Fixes

  • Use correct indendation (328815f)

Code Refactoring

  • 💡 Added a class for input-label disabled state (dc133f0) . ✅ Closes: 468335

reinstall (885c74b)

  • fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

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

Documentation Updates

  • ✏️ Move position of the quick links (5cb0897)

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

  • ✏️ Split out CSS documentation (c66651f) , closes #467386

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

Code Refactoring

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 Reduce spacing tokens, use correct size tokens (97aa461)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

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.7.0 (2021-09-22)

Documentation Updates

  • ✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

  • Use default shortcut listing for demo links (a746602)

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

Documentation Updates

  • ✏️ Wrap quote in a letterbox block (0a637b9)

  • 🤖 Rearrange diffs for test, use grey color for unaffected (1834399)

  • 🤖 Use node v14 (4009973)

bootstrap (d23e139)

13.1.4 (2021-08-31)

Miscellaneous chores

  • 🤖 Add segmented-control to input-label css (def3eb9)

  • 🤖 Use correct order for diff (cc6a4fd)

12.14.1 (2021-08-12)

Miscellaneous chores

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

12.12.1 (2021-08-10)

Bug Fixes

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

  • 🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

  • 🤖 Reinstall (e660696)

  • 🤖 Update published date (61e7ccf)

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)

⚠ 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

Features

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

Documentation Updates

  • ✏️ Clearly state that the label for attribute should point (75086a5) . to id, not name

Code Refactoring

Miscellaneous chores

  • 🤖 Make sure we have correct deps set, and used (5d2e0fb)

  • 🤖 Reinstall (2c763ea)

rebuild (7edb430)

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