CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window

Input fields let users enter and edit text.

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-fields@17.0.30-alpha.0

Edit this section

Usage

Markup

Here is the default input-field implementation code for HTML. Features implementation code is listed next to each feature element.

<form autocomplete="off" class="if">
  <div class="if input-wrapper">
    <input
      data-size="[smallest|smaller|small|large|larger|largest]"
      placeholder="Enter your last name"
      [required]
      aria-invalid="false"
      [invalid]
      name="<identifier>"
      id="<identifier>"
      type="text"
      class="if input-field [is-optional][is-complete][icon-string]"
    />
    <div class="if input-label-wrapper">
      <label class="if" for="<identifier>">Ägs sedan</label>
      <span class="if inline-nowrap"
        ><button type="button" class="if popover-button help" aria-label="Help"></button
      ></span>
    </div>
    <span class="if input-help"> Vilket år blev/blir du ägare? </span>
  </div>
  <div class="if input-wrapper">
    <textarea class="if textarea [full]" id="textarea-01"></textarea>
    <label class="if" for="textarea-01">Last name</label>
  </div>
</form>

With icons

<div class="if input-wrapper">
  <input
    placeholder="Enter your last name"
    name="input-field-with-icons-02"
    id="input-field-with-icons-02"
    type="text"
    class="if input-field icon symbol bulb-on"
  />
  <label class="if help" for="input-field-with-icons-02"
    >Last name<button
      type="button"
      class="if popover-button help"
      aria-label="Help with Enter your last name"
    ></button
  ></label>
</div>

<div class="if input-wrapper">
  <input
    placeholder="Enter your last name"
    name="input-field-with-icons-03"
    id="input-field-with-icons-03"
    type="text"
    class="if input-field icon ui preview trailing"
  />
  <label class="if help" for="input-field-with-icons-03"
    >Last name<button
      type="button"
      class="if popover-button help"
      aria-label="Help with Enter your last name"
    ></button
  ></label>
</div>

Validation error

<div class="if input-wrapper">
  <input
    data-size="larger"
    placeholder="Enter your last name"
    name="input-field-with-icons-04"
    id="input-field-with-icons-04"
    type="text"
    class="if input-field is-invalid"
  />
  <label class="if" for="input-field-with-icons-04">Last name</label>
  <span class="if input-error" aria-live="polite">A validation error</span>
</div>

Help text

<div class="if input-wrapper">
  <input
    data-size="larger"
    placeholder="Enter your last name"
    name="input-field-with-help-text-04"
    id="input-field-with-help-text-04"
    type="text"
    class="if input-field"
  />
  <label class="if" for="input-field-with-help-text-04">Last name</label>
  <span class="if input-help">A help text</span>
</div>

Optional

<div class="if input-wrapper">
  <input
    placeholder="Enter your last name"
    name="input-field-states-04asdsadsad2"
    id="input-field-states-04asdsadsad2"
    type="text"
    class="if input-field is-optional"
  />
  <label class="if" for="input-field-states-04asdsadsad2">Last name</label>
</div>

Reset

<div class="if input-wrapper">
  <input
    class="if input-field"
    value="2011"
    name="<identifier>"
    id="<identifier>"
    type="number"
    data-size="small"
    placeholder="1989"
  />
  <button type="button" class="if reset" aria-label="Reset"></button>
  <label class="if" for="<identifier>"> Ägs sedan </label>
</div>

Due to the constraints of the markup, and that we are reliable of the state of the input field to display certain control and label features, you will need some javascript to achieve the correct positioning of the reset button.

const calculateCorrectPositionForResetButton = (input) => {
  const _reset_el = input.parentElement.querySelector('.if.reset');
  if (!_reset_el) return;

  const _parent_el_rect = input.parentElement.getBoundingClientRect();
  const _input_el_rect = input.getBoundingClientRect();
  const _reset_el_rect = _reset_el.getBoundingClientRect();

  _reset_el.style.top = `${
    _input_el_rect.top - _parent_el_rect.top + _input_el_rect.height / 2 - _reset_el_rect.height / 2
  }px`;
  if (input.getAttribute('type') == 'number') {
    _reset_el.style.left = '1rem';
  } else {
    _reset_el.style.left = `${_input_el_rect.width - 18}px`;
  }
};
const inputs = document.querySelectorAll('input.if');

inputs.forEach((input) => {
  window.requestAnimationFrame(function () {
    calculateCorrectPositionForResetButton(input);
  });
});

Field length

With given attributes (data-size), you can vary the length of the input field. For optimal usability, use a size that corresponds with the type/amount of characters in the text-field. For example, the field for a postal code containing a maximum of 5 characters should use the attribute data-zize="small".

<form autocomplete="off">
  <div class="if input-wrapper">
    <input
      class="if input-field"
      data-size="largest"
      value="https://www.if.se/privat/vid-skada/saker/dator#5435124f07f54acc89b02e0b50185bcf"
      id="url-12"
      type="text"
    />
    <label class="if" for="url-12">URL</label>
  </div>
  <div class="if input-wrapper">
    <input
      class="if input-field"
      data-size="larger"
      value="Alexander Vassbotn Røyne-Helgesen"
      id="default-02"
      type="text"
    />
    <label class="if" for="default-02">Full name</label>
  </div>
  <div class="if input-wrapper">
    <input
      class="if input-field"
      data-size="large"
      value="25.09.2017"
      id="default-0222"
      type="date"
    />
    <label class="if" for="default-0222">Date</label>
  </div>
  <div class="if input-wrapper">
    <input
      class="if input-field"
      data-size="medium"
      value="john.doe@gmail.com"
      id="email-03"
      type="text"
    />
    <label class="if" for="email-03">Email</label>
  </div>
  <div class="if input-wrapper">
    <input
      class="if input-field"
      data-size="small"
      value="78481545"
      id="phonenumber-04"
      type="text"
    />
    <label class="if" for="phonenumber-04">Phone number</label>
  </div>
  <div class="if input-wrapper">
    <input class="if input-field" data-size="smaller" value="02148" id="zipcode-04" type="text" />
    <label class="if" for="zipcode-04">Zip code</label>
  </div>
  <div class="if input-wrapper">
    <input class="if input-field" data-size="smallest" value="B" id="houseletter-05" type="text" />
    <label class="if" for="houseletter-05">Houseletter</label>
  </div>
</form>

Edit this section

Tokens

Name	Value	Is aliased in
ids-input-fields-closed-font-weight	`126`
ids-input-fields-focus-border-width	`0.0625rem`
ids-input-fields-focus-border-color	`rgb(0, 84, 240)`
ids-input-fields-focus-border-style	`solid`
ids-input-fields-hover-outline-width	`0.0625rem`
ids-input-fields-hover-outline-color	`rgb(51, 30, 17)`
ids-input-fields-hover-outline-style	`solid`
ids-input-fields-error-margin-top	`0.5rem`
ids-input-fields-error-color	`rgb(187, 50, 12)`
ids-input-fields-error-font-size	`1.125rem`
ids-input-fields-error-line-height	`1.75rem`
ids-input-fields-error-font-weight	`82`
ids-input-fields-border-radius	`0.375rem`
ids-input-fields-color	`rgba(51,30,17,0.9)`
ids-input-fields-background-color	`rgb(255, 255, 255)`
ids-input-fields-border	`0.0625rem solid rgb(110, 98, 94)`
ids-input-fields-font-size	`1.125rem`
ids-input-fields-height	`3rem`
ids-input-fields-width-media-query-base	`100%`
ids-input-fields-width-media-query-md	`296px`
ids-input-fields-spacing-inset-horizontal	`1rem`
ids-input-fields-spacing-inset-vertical	`0`
ids-input-fields-transition	`all 0.1s cubic-bezier(0.4, 0.0, 0.2, 1)`
ids-input-fields-help-margin-top	`0.5rem`
ids-input-fields-help-color	`rgb(110, 98, 94)`
ids-input-fields-help-font-size	`1.125rem`
ids-input-fields-help-line-height	`1.75rem`
ids-input-fields-help-font-weight	`82`
ids-input-fields-wrapper-spacing-stacking-downwards	`2rem`
ids-input-fields-wrapper-spacing-stacking-upwards	`1rem`
ids-input-fields-placeholder-color	`rgba(110,98,94,0.6)`
ids-input-fields-reset-background-image	url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Ee remove%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%275%27 fill=%27%23faf9f7%27 stroke=%27%23faf9f7%27%3E%3Cline fill=%27none%27 stroke=%27%23faf9f7%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%275%27 x2=%275%27 y2=%2727%27/%3E%3Cline fill=%27none%27 stroke=%27%23faf9f7%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%2727%27 x2=%275%27 y2=%275%27/%3E%3C/g%3E%3C/svg%3E")
ids-input-fields-reset-background-color	`rgb(110, 98, 94)`
ids-input-fields-disabled-color	`rgba(110,98,94,0.3)`
ids-input-fields-disabled-background-color	`rgba(250,249,247,0.7)`
ids-input-fields-disabled-border-color	`rgba(110,98,94,0.3)`
ids-input-fields-invalid-border-color	`rgb(187, 50, 12)`
ids-input-fields-invalid-border-width	`0.125rem`
ids-input-fields-date-background-image	url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Ecalendar%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%23331e11%27 stroke=%27%23331e11%27%3E%3Cline data-color=%27color-2%27 x1=%279%27 y1=%271%27 x2=%279%27 y2=%275%27 fill=%27none%27 stroke-miterlimit=%2710%27/%3E%3Cline data-color=%27color-2%27 x1=%2723%27 y1=%271%27 x2=%2723%27 y2=%275%27 fill=%27none%27 stroke-miterlimit=%2710%27/%3E%3Cline data-cap=%27butt%27 data-color=%27color-2%27 x1=%2731%27 y1=%2711%27 x2=%271%27 y2=%2711%27 fill=%27none%27 stroke-miterlimit=%2710%27 stroke-linecap=%27butt%27/%3E%3Crect x=%271%27 y=%275%27 width=%2730%27 height=%2724%27 fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27/%3E%3C/g%3E%3C/svg%3E")
ids-input-fields-date-background-size	`1.5rem 1.5rem`
ids-input-fields-date-background-position	`right 0.75rem center`
ids-input-fields-date-padding-right	`3rem`
ids-input-fields-with-icon-leading-background-position	`left 0.75rem center`
ids-input-fields-with-icon-leading-background-size	`1.5rem 1.5rem`
ids-input-fields-with-icon-leading-padding-left	`3rem`
ids-input-fields-with-icon-trailing-background-position	`right 0.75rem center`
ids-input-fields-with-icon-trailing-padding-left	`1rem`
ids-input-fields-with-icon-trailing-padding-right	`3rem`

Edit this section

Accessibility

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" for="<identifier>">Username</label>
  </div>
</form>

Make input field keyboard-friendly

Users should be able to trigger and edit every field using only the keyboard. Power users, who tend to use keyboards heavily, should be able to easily tab through the fields and make necessary edits, all without lifting their fingers off the keyboard. You can find detailed requirements for keyboard interaction pattern in W3C’s Authoring Practices for Design Patterns.

Edit this section

Changelog

Change Log

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

16.0.0 (2023-01-10)

⚠ BREAKING CHANGES

The input field component now has a border-radius - 6px.

"feature 686990"

Merged PR 98055: feat(input-fields): style update for input fields (205b85a), closes #686990

14.24.2 (2022-05-30)

Code Refactoring

input-fields: convert html examples to using MDX/React components instead (302e94d) , closes #601044
input-fields: remove the local generation of design token documentation file (d96ac11)

Documentation Updates

input-fields: add documentation about input-error and input-help (b525f7c) , closes #599351

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.18.0 (2022-04-08)

Code Refactoring

💡 Use border-radius from CSS variable (63084bd) . To prepare for the design update

14.16.0 (2022-04-07)

Bug Fixes

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

14.13.0 (2022-04-06)

Bug Fixes

🐛 Encode data-value in design token documentation (85737c6)

14.9.0 (2022-03-03)

Miscellaneous chores

🤖 Bootstrap (6822f5b)

14.8.0 (2022-02-21)

Features

🎸 Add CSS variables to input fields (322099e)

reinstall (d425056)

lerna bootstrap (4df4863)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

use correct versions (f1b5deb)

14.3.0 (2022-02-09)

Bug Fixes

Use correct vars and mixins (f879b28)
Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

💡 Change focus styles, remove whatinput (75fd31b) , closes #505205
Use variables and correct design token (827d2d2)
Add deprecation notice in comment for mixin (d703ecf)
rebuild and reinstall (f9fb687)

reinstall (885c74b)

14.0.4 (2021-11-15)

Bug Fixes

Several fixes reported by Monta (8619659)
fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

reinstall.. again.. (8f5efa8)
revert to v13.12.2 (2ff5399)

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!

Bug Fixes

🐛 Fix import issue (792b0a8)
🐛 Specificity issues with type range (02ca949)

Documentation Updates

✏️ Move position of the quick links (5cb0897)
✏️ Remove unneeded margins for shortcuts (36c7e8d)
✏️ Separate out CSS documentatin (844d8f3) , 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

🤖 Prune changelogs (2c660c2)
🤖 Rename util to utils (f78721f)

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.12.2 (2021-10-27)

Bug Fixes

🐛 Added :not([type="range"]) to the appropriate selectors (4973dda) . ✅ Closes: 492590

13.12.1 (2021-10-25)

Bug Fixes

🐛 Bugfix of input-fields focus (8074f6a) . ✅ Closes: 474580

13.11.0 (2021-10-19)

Features

🎸 Input field hot reload (eac76b7)

Bug Fixes

🐛 Input field hot reload (dcbef7d) . ✅ Closes: 488768

13.10.5 (2021-10-14)

Bug Fixes

🐛 Input import (20774ea) . Import from correct file where other dependecies are available
🐛 Slider focus (ab50f15) . ✅ Closes: 485717
🐛 Slider styles (0650fde) . ✅ Closes: 485717

13.10.3 (2021-10-07)

Bug Fixes

🐛 Slider styles (abbfc23) . Fix slider width | remove input border

✅ Closes: 472886

13.10.2 (2021-10-07)

Bug Fixes

🐛 Remove default width with data size mixin (2a5561a) , closes #483471

13.9.2 (2021-09-30)

Bug Fixes

🐛 Complete the pseudo-element fix (1dcee2c)
🐛 Pseudo selectors (48d013a) . ✅ Closes: 478948
🐛 Use double colon notation for pseudo selectors (b78629b) . ✅ Closes: 478948
double colon (aabc47e)

13.7.0 (2021-09-22)

Documentation Updates

✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

🐛 Update repository urls (3dae3a3) , closes #465976

13.6.2 (2021-09-17)

Bug Fixes

🐛 Add font family to input help/error labels (49a6da3) , closes #472905

13.6.1 (2021-09-15)

Bug Fixes

🐛 Override ios/webkit radius for search input (1e15a01) , closes #471301

13.5.1 (2021-09-07)

Bug Fixes

🐛 Finalize data-size issue (f7f9f55) , closes #374144
🐛 Reduce specificity on selectors (3affc48)
🐛 Update and fix data sizing for form elements (5fbefb4) , closes #374144
🐛 Use a more logical approach for data sizes (5cd9ae9) , closes #374144
🤖 Rearrange diffs for test, use grey color for unaffected (1834399)
🤖 Use node v14 (4009973)

bootstrap (d23e139)

🤖 Use correct order for diff (cc6a4fd)
remove IE11 support (3eb36e6)

12.14.5 (2021-08-18)

Code Refactoring

💡 Split up input-fields core file (f221de9) , closes #460273

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
🤖 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.1.0 (2021-05-07)

Miscellaneous chores

🤖 Documentation cleanup (1deeceb)

12.0.0 (2021-05-05)

⚠ BREAKING CHANGES

🧨 All of the mixins have now been renamed
🧨 Notification is now renamed to Alert Banner
🧨 Textarea is now extracted from Input Fields into a separate component, Textarea
🧨 This extracts the Hero variation with no image into a separate, design updated component named Header
🧨 The Dropdown Component is now renamed to Dropdown Select. Dropdown is a pattern.

Features

🎸 Extract textarea from Input Fields to Textarea comp (c2c1174) , closes #336508
🎸 Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component

Bug Fixes

🐛 Update references (c08f107)

Documentation Updates

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

Code Refactoring

💡 Adjust markup and documentation (8ee3a6d) , closes #336508
💡 Extract Label to Input Label (c8bbf70) , closes #336508
💡 Rename and consolidate mixins (67cf470) , closes #268081
💡 Rename Dropdown to Dropdown Select (af1fc9d) , closes #336508
💡 Rename Notification to Alert Banner (8b4e48d) , closes #336508

Miscellaneous chores

🤖 Add missing deps (8f82b0a)
🤖 Convert typography tokens from theo to SD (e48f255)
🤖 Convert util tokens from theo to style-dictionary (99fb4f5)
🤖 Finalize breakpoint token conversion (f50ea0d)
🤖 Make sure all components are named with capital first (08e9a26)
🤖 Make sure we have correct deps set, and used (5d2e0fb)
🤖 Reinstall (2c763ea)
🤖 Update all design token references (c640d15)
🤖 Update references to util variables (b79ec36)
🤖 Updating links (70f166e)
🤖 Use size token for common form height until unique tok (3efceab) . en is created

rebuild (7edb430)

11.0.0 (2021-03-15)

Bug Fixes

🐛 Set fonts for input-help and input-error (a5c5294)

10.2.3 (2021-03-11)

Bug Fixes

🐛 Fix a bug where the tooltip was not placed correctly (c1e760d)

10.2.1 (2021-03-05)

Documentation Updates

✏️ Remove hardcoded asterix for required fields (463d234)
🤖 Rename Change Log to Changelog (d412e63)
🤖 Remove all references to sketch (35fc554) , closes #339203
🤖 Update package fields (200c0af)

10.0.0 (2021-02-15)

⚠ BREAKING CHANGES

🧨 form-group is now renamed to input-wrapper, a more logical name
🧨 The html structure for input-fields has changed. Please review documentation and changeset to get up to date!

Bug Fixes

🐛 Fix sizes of input-fields to align better with grid (3437c6b)
🐛 Typo (b3202a6)
🐛 Use correct name for optional flag (652b8e9)
🐛 Use correct svg string (fc3a9de)

Code Refactoring

💡 Refactor out feature components, redo structure (930ff9e) , closes #308914 . Due to accessibility and validation issues, we're changing the html syntax for the input-fields, in regards of labels and usage of the help-tooltip button. We've also added some new design styling to accommodate for v2 of the input fields. We've cleaned up some colors and borders as well. We've also added support for a clear field button. We separated out label, input-wrapper, reset, sizes and the help-tooltip feature in separate style files, for easier inclusion of just what you want.
💡 Rename form-group to input-wrapper (7ee3bae)

Documentation Updates

✏️ Upate doc examples and docs regarding input-fields (38f6af8)
✏️ Update doc and examples with aria-invalid (1f3b60b) , closes #343645
🤖 Update documentation files with example code (f8fd7b9)
reinstall packages (fcfacf4)

7.1.0 (2020-11-16)

Features

🎸 Add support for auto generation of components index (9444600) , closes #309650

6.44.0 (2020-11-11)

Features

🎸 Add numeric stepper to input-fields component (ddc51dd) , closes #301222
🤖 Started to work on bug (55a83c8)

6.43.3 (2020-11-03)

Bug Fixes

🐛 Make sure the help tooltip button doesn't shrink (5c29386) , closes #307539

Documentation Updates

✏️ Add missing closing tag for help tooltip implementation (88e9c54)

Miscellaneous chores

🤖 Manually set version (e4d9ca6)
🤖 Rename repository from guybrush to if-design-system (c18bccd)

reinstall (2cefe15)

6.36.1 (2020-10-13)

Bug Fixes

🐛 Reset border-color on input focus with mouse (e4df343)

6.36.0 (2020-10-12)

Features

🎸 Add updated focus styling to input-fields (df1ac3e)

Miscellaneous chores

🤖 Add what-input to demo and dev files (56801b7)
🤖 Rename focus style mixins (e18b688)

6.29.4 (2020-09-09)

Documentation Updates

✏️ Close button tag in input-field usage doc (b89c00d)

6.29.3 (2020-09-07)

Documentation Updates

✏️ Merge atoms/molecules/organisms into components (90ed590)

6.29.2 (2020-09-03)

Documentation Updates

✏️ Use blur instead of oninput in input validation example (8c8d787)

6.29.1 (2020-09-03)

Bug Fixes

🐛 Don't display fields as invalid when they are required (32184ae) . but not filled out
🐛 Hide help text for input when field is invalid (22dc53f)

Documentation Updates

✏️ Add correct aria label for form control invalid errors (eda6037)
✏️ Add documentation about validation for input-fields (4f84c40)
✏️ Cleanup documentation example layout for input-fields (0894116)

6.26.14 (2020-08-04)

Documentation Updates

✏️ Update documentation layout (4566228)

6.26.12 (2020-08-03)

Documentation Updates

✏️ Update documentation for the new registry (3e7ba20)

Miscellaneous chores

🤖 lerna bootstrap (d835ec9)
🤖 Temporarily remove package-lock.json-files (87b3f7f)
🤖 Update references to new scope (b5575dd)

6.26.10 (2020-07-14)

Miscellaneous chores

🤖 Manually update some links (ecc0133)
🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)

6.26.0 (2020-07-13)

Features

🎸 Make large search larger, and add support for dark bg (0fb63b9)

6.25.2 (2020-07-08)

Bug Fixes

🐛 Use correct heading classes in examples (52c1e2d)

6.23.0 (2020-07-01)

Miscellaneous chores

reinstall (1ab1527)

6.22.0 (2020-07-01)

Features

🎸 Add new color categories, update documentation (5496822)

Bug Fixes

🐛 Use correct colors for disabled states in input controls (a0862db)

Documentation Updates

✏️ Update documentation layout (816053b)

Miscellaneous chores

🤖 Rename darkRed to red for status color (ba76a92)
🤖 Search and replace old color usage (3e5abb0)

6.21.6 (2020-06-11)

Miscellaneous chores

🤖 Remove .zip files from .npmignore (b3bc7dc)

6.19.0 (2020-06-02)

Miscellaneous chores

reinstall (3416c65)

6.17.4 (2020-05-25)

Bug Fixes

🐛 Fix focus on invalid input fields when placeholder is not shown (f3ba10b)

6.15.5 (2020-05-15)

Miscellaneous chores

prepped and ready to separate documentation site from code (d3e1fd9)
pruning and reinstalling (5cda0bc)

reinstall (939dae6)

reinstall (cae55fb)

Remove livingcss data and add frontmatter data (b384946)

6.15.4 (2020-05-14)

Miscellaneous chores

lerna bootstrap (0c4f599)

6.15.2 (2020-05-11)

Miscellaneous chores

reinstall and build (aedc097)

6.15.0 (2020-05-07)

Miscellaneous chores

🤖 reinstall (80dc63c)
update deps (3fbea80)

6.12.0 (2020-04-27)

Features

🎸 Add support for large search field (6b6eba0)

6.11.3 (2020-04-22)

Documentation Updates

✏️ Add some docs about accessibility testing (da5b596)

6.10.9 (2020-04-22)

Miscellaneous chores

🤖 Add *.zip-files to .npmignore-files (062b8b0)
🤖 Remove references to verb in package.json files (cfdaaec)

6.10.6 (2020-04-17)

Miscellaneous chores

🤖 lerna bootstrap (d8faf26)

6.10.5 (2020-04-16)

Code Refactoring

💡 Use a common core token for form element height (4481d11)

6.10.1 (2020-04-16)

Bug Fixes

🐛 Fix validation messages for dropdowns (986896f) , closes #240996

6.10.0 (2020-04-16)

Features

🎸 Add search icon to search input field (11466f9)

6.9.1 (2020-04-16)

Documentation Updates

✏️ Use correct badge color in README.md (03b563e)
✏️ Use correct name for package in the README.md (acef81e)

6.8.1 (2020-04-15)

Bug Fixes

🐛 Remove user agent styling for webkit for search fields (2643c4e)

6.6.0 (2020-04-09)

Documentation Updates

✏️ Change edit this document to edit this section (791b646)

6.5.4 (2020-04-08)

Bug Fixes

🐛 Hide responsive examples (6fec609) , closes #240240

6.5.3 (2020-04-06)

Documentation Updates

✏️ Some more sg updates and tweaks (d1d6802)

6.4.2 (2020-04-03)

Bug Fixes

🐛 Use max-height none instead of unset (05ff638)

6.3.4 (2020-04-01)

Miscellaneous chores

🤖 Use more of if styling on documentation site (2eaf386)

6.3.2 (2020-03-31)

Documentation Updates

✏️ Replace sg.message with if.notification (5d1aa99)

6.1.3 (2020-03-26)

Miscellaneous chores

🤖 Adjust widths for upload field for responsive. Docs (e307999)

6.1.0 (2020-03-25)

Features

🎸 Add new component file upload (40942fa)

5.3.0 (2020-03-18)

Bug Fixes

🐛 Set button and input height to 48, down from 56px (f00db7d)

5.2.0 (2020-03-17)

Code Refactoring

💡 Reorganized sections in the documentations (dd31802) . Adjust navigation styling on the left hand side. The reorganization is mostly to make the site load a bit smoother

5.1.0 (2020-03-15)

Bug Fixes

🐛 Adjust largest size for input fields from 200px to 360px (1cc0666)

5.0.4 (2020-03-14)

Miscellaneous chores

🤖 Delete really old install files, update README files (c5d4893)
🤖 Remove .npmrc fles (4e26249)

5.0.1-alpha.160 (2020-03-12)

Miscellaneous chores

lerna bootstrap (0128bdb)
lerna bootstrap (1019833)

5.0.1-alpha.151 (2020-03-05)

Features

🎸 Add new typography rule for captions. Refactor weights (a033f4e) . and updated documentation

5.0.1-alpha.149 (2020-03-05)

Bug Fixes

🐛 Adjust labels, input-fields and breadcrumbs to baseline (67307fc)

Miscellaneous chores

🤖 Finish adjusting components to baseline grid (50f7a69) . Chang approx 6888 raw values to variables
🤖 Starting to align components to new baseline grid (cf2c073)
Align typography to baseline. First attempt (f4447e9)
Starting to align components to new baseline grid (999babf)