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.
$ npm i @ids-core/Input Label@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
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
<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>
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 fieldsid
-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>
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
14.9.0 (2022-03-03)
Miscellaneous chores
- ๐ค Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
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)
reinstall (afce1f2)
reinstall (67f3140)
14.2.7 (2022-01-18)
Bug Fixes
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
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 fromif-design-system
toids-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
-
๐ก 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)
reinstall (da80dba)
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
-
๐ 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
12.14.1 (2021-08-12)
Miscellaneous chores
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
-
๐ค 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
-
๐ก Extract Label to Input Label (c8bbf70) , closes #336508
-
๐ก Rename and consolidate mixins (67cf470) , closes #268081
-
๐ก Rename Notification to Alert Banner (8b4e48d) , closes #336508
Miscellaneous chores
rebuild (7edb430)