Back to Input Fields-guidelines

CSS ComponentThe latest version of this package is: 14.0.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@14.0.0

Table of Contents

Edit this section, Opens in new window

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 help-tooltip" 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 help-tooltip" 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 help-tooltip" aria-label="Help with Enter your last name"></button
  ></label>
</div>
A 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>

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

The usage of the reset button is optional. Choose the best use case for this.

<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</i></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</i></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, Opens in new window

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

Bug Fixes

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

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

Bug Fixes

  • 🐛 Added :not([type="range"]) to the appropriate selectors (4973dda)

13.12.1 (2021-10-25)

Bug Fixes

  • 🐛 Bugfix of input-fields focus (8074f6a)

13.11.0 (2021-10-19)

Bug Fixes

  • 🐛 Input field hot reload (dcbef7d)

Features

  • 🎸 Input field hot reload (eac76b7)

13.10.5 (2021-10-14)

Bug Fixes

13.10.3 (2021-10-07)

Bug Fixes

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)
  • 🐛 Use double colon notation for pseudo selectors (b78629b)
  • double colon (aabc47e)

13.9.1 (2021-09-28)

Bug Fixes

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

12.13.1 (2021-08-11)

Bug Fixes

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)

Bug Fixes

Code Refactoring

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

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.

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.0.0 (2021-02-15)

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
  • 💡 Rename form-group to input-wrapper (7ee3bae)

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!

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

6.43.3 (2020-11-03)

Bug Fixes

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

6.43.2 (2020-11-03)

Bug Fixes

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

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)

6.29.1 (2020-09-03)

Bug Fixes

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

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.22.0 (2020-07-01)

Bug Fixes

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

Features

  • 🎸 Add new color categories, update documentation (5496822)

6.17.4 (2020-05-25)

Bug Fixes

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

6.12.0 (2020-04-27)

Features

  • 🎸 Add support for large search field (6b6eba0)

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.8.1 (2020-04-15)

Bug Fixes

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

6.5.4 (2020-04-08)

Bug Fixes

6.4.2 (2020-04-03)

Bug Fixes

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

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.1.0 (2020-03-15)

Bug Fixes

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

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

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

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

Features

  • 🎸 Add new typography rule for captions. Refactor weights (a033f4e)

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

Bug Fixes

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

5.0.1-alpha.131 (2020-02-23)

Bug Fixes

  • 🐛 More tuning of active state for input fields (a1e1f90)
  • 🐛 Tune active state (3652f9c)

5.0.1-alpha.126 (2020-02-18)

Bug Fixes

  • 🐛 Use 1pt border on invalid fields instead of 2pt (c798203)

5.0.1-alpha.122 (2020-02-17)

Features

  • 🎸 Add design to input type file (8bb1653)
  • 🎸 Add preprocessor files and tests for input fields (8b9c09a)

5.0.1-alpha.120 (2020-02-17)

Bug Fixes

  • 🐛 Do not use variables in calc (b6b6108)

5.0.1-alpha.116 (2020-02-06)

Bug Fixes

  • 🐛 Make if help label 100% width (5398c46)
  • 🐛 Use 20px padding on input-fields instead of 19px (499d1cb)

5.0.1-alpha.111 (2020-01-21)

Bug Fixes

  • 🐛 Fix responsiveness for forms grids, heroes and inputs (5de0a0d)

5.0.1-alpha.110 (2020-01-21)

Bug Fixes

  • 🐛 Remove duplicate support color (a7f346d)

5.0.1-alpha.105 (2020-01-13)

Features

  • 🎸 Finishing up datepicker first version (9da9556)

5.0.1-alpha.87 (2019-12-04)

Bug Fixes

  • 🐛 Several fixes (3cb042e)
  • 🐛 Use correct font sizes and icons for validation errors (ae4061c)
  • 🐛 Use correct validation error icon (a4d1c20)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • 🐛 Use package-based imports (6822233)

5.0.1-alpha.58 (2019-11-22)

Features

  • 🎸 Remove normalize.css (2c23c2b)

5.0.1-alpha.44 (2019-11-08)

Features

  • 🎸 Add support colors, replace hardcoded rgb to variables (32a2b9e)

5.0.1-alpha.41 (2019-11-05)

Bug Fixes

  • 🐛 Adjust spacing from top on the help field for inputs (f91d23b)
  • 🐛 Remove indentation of help texts for input fields (8293b8e)

5.0.1-alpha.40 (2019-11-05)

Bug Fixes

  • 🐛 Fix typography based on latest sketches (2653b61)

5.0.1-alpha.34 (2019-10-31)

Bug Fixes

  • 🐛 Use correct padding when using trailing icons in input (e29cad4)

5.0.1-alpha.27 (2019-10-29)

Bug Fixes

  • 🐛 Give correct color to disabled label (4c2ead4)

5.0.1-alpha.26 (2019-10-28)

Bug Fixes

  • 🐛 Always make labels visible (3b11ab0)

5.0.1-alpha.17 (2019-10-16)

Features

  • 🎸 Add textarea to input fields, also use correct bg-color (9bb46b8)

5.0.1-alpha.12 (2019-10-15)

Features

  • 🎸 Add helper icon to label (8bdac99)
  • 🎸 Add latest changes to input-fields (cc6ac5d)
  • 🎸 Final adjustments to this version of input fields (959a443)

5.0.1-alpha.6 (2019-10-08)

Features

  • 🎸 Add design tokens to typography (384829e)

5.0.1-alpha.3 (2019-10-04)

Bug Fixes

  • 🐛 Replace fieldset with .if.form-group (ac2eabb)

5.0.1-alpha.2 (2019-10-04)

Bug Fixes

  • 🐛 Replace fieldset with .if.form-group (ac2eabb)

5.0.1-alpha.1 (2019-09-30)

Bug Fixes

  • 🐛 Adjustments to buttons and input fields (a796809)
  • 🐛 Correct colors for states and updated markup (f4fb8e8)

Features

  • 🎸 Add new component input-fields (5f6e5a4)
  • 🎸 Add size features and states to input fields (8029e04)
Edit this section, Opens in new window
Contact us, Opens in new window