Skip to content

Components-TextFields

Text fields allow users to input, edit, and select text. Text fields typically reside in forms but can appear in other places, like dialog boxes and search.

Usage

Text fields validate input, help users fix errors, autocomplete words, and provide suggestions.

Field types

  1. Single-line
  2. Multi-line
  3. Text area

Input types

  1. Formatted inputs
  2. Nested menus & pickers

Principles

Text fields should have the following characteristics:

  • Identifiable :
    • Using a tappable touch target, text fields should indicate that users can enter information.
  • Findable :
    • It should be easy to find a text field among other elements.
  • Legible :
    • Text fields should indicate their state – whether enabled or disabled, empty or filled, valid or invalid – with clear label, input, and assistive text.

Layout

Text fields contain the following elements:

Label:

  • Text field labels display the type of input a field requires.
  • Every text field should have a label.
  • Labels are aligned with the input line and always visible.
  • They can be resting (when a field is inactive and empty) or floating.

Input Line:

  • The input line indicates where to enter text, displayed below the label.
  • When a field is active or contains an error, the line’s color and thickness vary.

Cursor:

The cursor indicates the user’s current input position.

Input text

  • Text entered into a text field is called input text.
  • The first letter of input text (and each sentence in a field) should be capitalized where appropriate.
  • Input text can be used with autocomplete to help users who have limited literacy or who write in a foreign language.

Placeholder Text

  • Placeholder text rests in the input field until the user starts entering text.
  • It may contain an action or an example, such as a phone number or email address.

Helper text

Helper text gives context about a field’s input, such as how the input will be used.It should be visible either persistently or only on focus.

Specs:

  • Left justified.
  • On a single line if possible, or with text wrapping (if multiple lines).

Error message

  • When input provided is wrong display error message below input line.
  • An error message should appear on a single line, if possible.
  • An error message is preceded by the word “Error” (or an error icon) to make the error state more distinct to colorblind users.

Required field

To indicate that a field is required, display an asterisk (*) next to its label. At the bottom of the form, mention that asterisks indicate required fields.To indicate that if a field is optional, display the word “optional” in parentheses next to the field label.

Character or word counter

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

Specs:

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

Icon signifier

  • Icons describe the type of input a text field requires.
  • They are displayed to the left of the text field.
  • Icons can also be touch targets for nested components.

Voice input icon

  • A microphone icon signifies that users can input characters using voice.
  • Voice input icons are right justified, and always enabled.

A dropdown arrow indicates that a text field contains nested selections.

Clear button

Clear buttons let users empty an entire input field. They are right justified in the field. In forms with many or crowded fields, text fields may be made shorter.

States

Text fields have two major states: enabled or disabled. In the enabled state, these user interactions are available:

  • Idle
  • Hover
  • Pressed
  • Focused

Text field input can be either:

  • Empty or filled
  • Valid or invalid

Text field states

--------------- PENDING-----------