Updated: May 21, 2018

Text Input

Intro

Text Input controls are used to request a text entry from users. They are normally found in Create and Edit modals as a part of completing the task.

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 without label

Single-line text: Use Text Field with label

Multiline text: Use Text View

 

Text Field

A text field allow users 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 a label gives the user more context about each text entry. The height of the field is fixed. The label is always required, while the prompt text is optional. The prompt text should inform the user about the type or format of the value to be entered. It’s recommended to use text fields with labels for values that are vague, such as numerical values and contact information.

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 (Not available in SDK)
Text Field with Label - Grouped Characters (Not available in SDK)

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 (Not available in SDK)
Text Field with Label - Prefix (Not available in SDK)

Suffix

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

Text Field with Label - Suffix (Not available in SDK)
Text Field with Label - Suffix (Not available in SDK)

 

Text View

Text view cells provide space for entering multiple lines of text, 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 will allow users to see the entire cell.

If the text view cell is the bottom 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 will be included next to the label. On the top of the form, a line will 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 numeric keyboard when asking for phone numbers.

Display a Clear button when typing in a Text Field. Tapping on the Clear button clears all the content in the Text Field.