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.

Pre-filled

When the information is pre-filled, the input field is not visible until you choose to edit the information. The pre-filled information stands out from the label. 

Placeholder text

Placeholder text is often placed in the input field until the user starts entering text. Helper text can be added to help the user by giving context about a field’s input, such as how the input will be used. The helper text should be visible either persistently or only on focus. [image]

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

Specification

Colours and sizes

  • Field label: 16 medium, line height 20
  • Field label disabled: 16 medium, line height 20, Grey 6
  • Field instruction: 14 regular, line height 20
  • Field instruction disabled: 14 regular, line height 20, Grey 6
  • 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

States

  • Normal: Grey 6 (border)
  • Hover: Blue (border)
  • Selected: Dark blue 2 (border)
  • Disabled: Grey 7 (border), Grey 8 (filled)