Updated: January 17, 2019

Text Input

Intro

Text input controls are used to request a text entry from the user. They are usually found in the create or edit pattern.

Types

Depending on the length of the text that you need users to provide, you can choose one of the following types of Text Input controls:

Single-line text: Use Text Field  or Text Field with Label

Multiline text: Use Text View

 

Text Field

A text field allows the user to enter a small amount of information into a single, fixed-height container. If multiple lines of text are required, use a text view instead (see below for more details).

Before user content has been entered into a text field, it should display clear and concise placeholder text to communicate its purpose (for example, “Title” or “Description”). Vague directions should be avoided (for example, “Tap to Write” does not explain the purpose of the text field). If necessary, the content in text fields can be pre-populated.

Text Field
Text Field

 

Text Field with Label

A text field with label gives the user more context about each text entry. The height of the field is fixed. The label is always required, while prompt text is optional. The prompt text should inform the user about the type or format of value that he/she should be entering. It’s recommended that you use text field with label when the data’s format is unknown, such as numerical values.

Text Field with Label
Text Field with Label

 

Grouped Characters

Input text can be grouped with specific formats. For example, parentheses and hyphens can be added to form a format for phone numbers. This could also be applicable for requesting credit card numbers from the user.

Text Field with Label - Grouped Characters
Text Field with Label - Grouped Characters

Prefix

A prefix can be added to define a unit for each field. Prefixes are left-aligned in the text field.

Text Field with Label - Prefix
Text Field with Label - Prefix

Suffix

Suffixes are right-aligned and will move along with the cursor.

Text Field with Label - Suffix
Text Field with Label - Suffix

Icon

An icon may be included to launch the barcode scanner or OCR scanner.

Text Field with Label - Icon
Text Field with Label - Icon

 

Text View

Text view cells provide space for multi-line text entry, for use cases such as entering notes. A text view cell’s height should usually be larger than a single cell to indicate its multiline functionality. If there are additional accessories below the text view section (such as Attachments), the height of text view cell should be fixed, and a scroll bar allows users to see the entire cell. If the text view cell is the bottom-most section of a create view modal, the height of the cell can grow continuously downwards as the user types content into the cell.

Text view
Text view

 

Guidelines

Grouping text fields without labels and text fields with labels in one section is not recommended. Instead, separate them with a divider to provide better content hierarchy.

Don't
Do
Do

 

To indicate that a text field is required, an asterisk should be included next to the label. On the top of the form, a line should mention that asterisks indicate required fields.

If a text field is optional, display the word “optional” in parentheses next to the label.

In forms with some required fields, all of the required ones will be indicated. However, if there are fewer optional fields, only the optional ones will be indicated.

 

Behavior & Interaction

Tapping on any of the text input controls should automatically bring up the keyboard to facilitate text input. Use the appropriate keyboard for different types of data entry.  For example, use the numeric keyboard when asking for phone numbers.

Display a “clear” button when typing in a text field. Tapping on it clears all the content in the text field.