Input field

Input fields allow users to add and edit text.

 

Short description

Input fields typically reside in forms, but can appear in other places like dialog boxes and search. Input fields can help users validate input and fix errors, they can also autocomplete words and provide suggestions.

Autocomplete

Input text can be used with autocomplete to help users who have limited literacy or who write in a foreign language. See Autocomplete.

Labels

Input fields labels display the type of input a field requires. Every text field should have a label (a few exceptions exist like search-fields). The label can be placed in different positions, but should be connected to the input field and always be visible. Having the label above the input field can take up a lot of space.

Static data

Make static data stand out from its' label header. 

Placeholder text

Placeholder text is placed within the input field and disappears when the user starts entering text. Use only when absolutely needed as it often adds confusion. If users need the information after entering data, field instruction should be used.

Field instruction

Placed between the label and field, it helps the user with instructions for what to enter in the field or how to interpret the label. If multiple form-fields are placed horizontaly the instruction is placed under the field to help alignment of the fields.

Error handling

When input isn’t accepted, text fields can display an error message below the input line, with instructions on how to fix the error. Until the error is fixed, the error replaces the helper text.

  • An error message should appear on a single line, if possible.
  • An error message is preceded an error icon to make the error state more distinct to colorblind users

Optional fields

To indicate that a field is optional, display the word “optional” in parentheses next to the field label. Generally strive for only having fields that we actually need the user to fill in. If it’s not needed, then it can perhaps be removed from the form.

Character or word counter

Use character or word counters where there is a character or word limit.

  • Right justified
  • Displayed as a ratio of characters used and the character limit (formatted as: characters used / character limit)
Formatted inputs

Input fields can be formatted to indicate the types of data a field accepts, using placeholder text. The inputted text is also formatted. Characters can be formatted using:

  • Grouped characters
  • Prefixes and suffixes
  • Password disguise
  • Input fields - with all states
Free text

 

Do's and don'ts

Do

  • Feel free to use a smaller size of input fields in tables and lists (see the specification for details).

Don't

  • This variation with a grey block to the right in input fields and dropdowns is not standard SEB design.

 

Specification

Input field - standard

  • Field label: 16 medium, line height 20
  • Field label disabled: 16 medium, line height 20, Grey 400
  • Field instruction: 14 regular, line height 20
  • Field instruction disabled: 14 regular, line height 20, Grey 400
  • Input field text: 16 px, line height 20
  • Error indicator: 2 px height
  • Error text: 14 regular, line height 20, Dark Red 1
  • Field label without input field: 16 regular, 20

Input field - small

A smaller size of input fields are used inside tables and lists.

Input field
  • Height: 2 rem
  • Font-size: 1 rem
  • Padding left/right: 0.5 rem

Label is hidden and headline in column will be used for description instead.

Table cell
  • Height: 3 rem (when no validation)
  • Padding top/bottom: 0.5 rem

States

  • Normal: Grey 400 (border)
  • Hover: Blue (border)
  • Selected: Dark blue 2 (border)
  • Disabled: Grey 300 (border), Grey 200 (filled)

Error state

 

Labels

The same copy principles can be used for labels, radio button texts, choices in drop-down menus, headings, page titles, navigation texts, link texts and other short texts.

Use informative words

The texts should be clear and informative. Avoid information-poor words such as information, important, welcome and regarding.

Single words or complete sentences

The texts should be as short as possible. Labels can, but need not, be complete sentences. In some situations, we use the query format to push the information that customers need to leave, such as What do you want to buy? How much do you earn? How do you get your main income? etc.

Skip the verb in simple labels

In the label itself, you do not need to use verbs such as Enter, Fill in, Write or Choose that tell the customer what he or she is supposed to do. For instance, write Recipient's name instead of Fill in the recipient's name. And when the recipient's name is displayed in a summary, it is sufficient to only write Recipient.

Field instruction

The field instruction, or field help texts, are used to explain input field labels, column headings and subheadings. Ideally, the short text should be self-explanatory so that no field assistance is needed. Use field help only when something needs to be explained that is not clear from the label.

Explain what the customer needs to know to fill in the field or understand the data displayed. Be brief.

Placeholder text

Distinguish between the label, the field instruction (help texts) and the placeholder text. The label tells you what to enter, the placeholder text how to fill in, what format to use or why the customer should enter the data.

You can use placeholder texts for instance showing a pattern that the customer can use, such as YYYYMMDDNNNN when logging in or how a phone number might look like, Example 070123456.

Don't
  • Do not replace the label text with placeholder text, they have different purposes. 
  • Do not repeat the label text in the placeholder text.
  • Do not use too many characters.
  • The placeholder text must not be crucial for the customer to be able to fill in the information.

Error handling

There is not much space adjacent to the input field. Therefore, provide a constructive suggestion on how to solve the problem instead of telling what the customer has done wrong.