Overview

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

Edit this section, Opens in new window

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
Edit this section, Opens in new window

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

Reset

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

Reset/Clear field button
Edit this section, Opens in new window

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

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 be a small input field.

  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, Opens in new window
Contact us, Opens in new window