Skip to content

Input Fields13.10.5

Input fields let users enter and edit text.


$ npm i @if-design-system/input-fields@13.10.5

Edit this section

Overview

Input fields enable the user to interact with and input content.

Edit this section

Usage

Sizing

There are instances, sometimes in the same form, where you need users to enter both short and long form content. Allow the size of the text input box to reflect the length of the content you expect the user to enter.

Types

Here is examples on how the different input types look like. For more information on the different types, please see the MDN documentation.

Please use the semantically correct input type for your needs! If you want regex pattern matching, use the pattern-attribute. If you want to format the input, use input[type="text"] and an appropriate addon, i.e. cleave.js

Text
Date

Note, if you want a datepicker, see the Datepicker component.

Telephone number
Datetime local
Number

If you are looking for a numeric stepper, go here.

Email
Password
Time
URL

With icons

Leading icon inside
Trailing icon inside
A validation error
Error icon
<form autocomplete="off" action="">
  <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>
  <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>
</form>

Behaviours

Edit this section

Behaviours

Operational states

Static
Filled out and closed
When typing (Focused with value)
Complete
A validation error
Invalid with no value ( for example a required field )
A validation error
Invalid with value ( for example wrong value )
A validation error
Vi behöver ditt personnummer för att kunna ge dig rätt pris. Personnummer ger oss uppgift om din ålder, var du bor och hur länge du har haft körkort.
Invalid with more error text. (We use popovers in this example.)
A validation error
Focus + Invalid

Interactions

Focus

Focused

Modifiers

Disabled

Disabled

The following modifiers should also apply to textareas, Autocomplete, Search field (by some extent), File upload and the Dropdown components.

Required

Required

Input fields marked required get the asterix by default.

Optional

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>

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

Reset

Reset/Clear field button

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.

<div class="if input-wrapper">
  <input
    class="if input-field"
    value="2011"
    name="adsadsadasdasd8888hhhsb"
    id="adsadsadasdasd8888hhhsb"
    type="number"
    data-size="small"
    placeholder="1989"
  />
  <button type="button" class="if reset" style="left: 1rem; top: calc(100% - 8px - 24px);" aria-label="Reset"></button>
  <label class="if" for="adsadsadasdasd8888hhhsb">
    Ägs sedan
  </label>
</div>
const calculateCorrectPositionForResetButton = input => {
  const reset = input.parentElement.querySelector('.if.reset');
  if (!reset) return;

  const parentRect = input.parentElement.getBoundingClientRect();
  const inputRect = input.getBoundingClientRect();
  const resetRect = reset.getBoundingClientRect();

  reset.style.top = `${inputRect.top - parentRect.top + inputRect.height / 2 - resetRect.height / 2}px`;
  if (input.getAttribute('type') == 'number') {
    reset.style.left = '1rem';
  } else {
    reset.style.left = `${inputRect.width - 18}px`;
  }
};
const inputs = document.querySelectorAll('input.if');
inputs.forEach(input => {
  window.requestAnimationFrame(function() {
    calculateCorrectPositionForResetButton(input);
  });
});
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

Anatomy

Text field
  1. Placeholder text (optional)
  2. Text label
A help text for the input field
Text field
  1. Helper text aligned with the input field text (optional)
A validation error
Text field
  1. Validation error text aligned with the input field text (optional)
Text field
  1. Leading icon inside (optional)
  2. Help button (optional)
Text field
  1. Trailing icon inside (optional)

On backgrounds

B1

B3

B4

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

  1. Largest
  2. Larger
  3. Large
  4. Medium
  5. Small
  6. Smaller
  7. Smallest
Do not use over sized input lengths for small input
Use input lengths appropriate for the input

Default values

Where possible, add programmatic assistance. Detect and pre-fill inputs to reduce errors and save time. When the software can't determine the value that belongs in an input, use type-ahead to make suggestions. Use sentence-case for default values, detected values, and auto-completion text.

Validation and errors

Real time validation helps to streamline the process and keep data clean when the user is filling out forms. For full guidelines, refer to the Forms documentation.

Edit this section

Implementation

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>
Edit this section

Contact us