Updated: May 21, 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

There are three types of text input components: title form cell, text field, and note form cell.

Title Form Cell

A title form cell allows the user to enter a small amount of information into a single line, fixed-height container. It is best used for content that is self-explanatory, for example the title of an object or the name of a person.

Be sure to include clear and concise prompt text to communicate the purpose of the input field (e.g., “Title” or “Description”). Vague directions such as “Tap to Write” should be avoided.

 

Text Field

A text field 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 the text field instead of the title form cell when the data’s format is unknown, such as numerical values.

Grouped Characters

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

Prefix

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

Suffix

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

 

Icon

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

 

Single-Line Text Field

The text field has a single-line variant which is recommended to use in applications in regular width only. When multiple single-line text fields are present, make sure the values are aligned to the left to create a visual balance in the screen.

 

Note Form Cell

A note form cell is used for multi-line text entry. If additional accessories are present below the note form cell (such as Attachments), the height of the cell should be fixed, and a scroll bar will allow users to see the hidden content. If the note form cell is the bottom-most component in the create pattern, the height of the cell can be flexible to grow downwards as the user inputs content into the cell.

The label of the cell may or may not be present depending on the type of content the user is inputting.

Guidelines

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.