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
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 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.
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.
A prefix can be added to define a unit for each field. Prefixes are left-aligned in the text field.
Suffixes are right-aligned and will move along with the cursor.
An icon may be included to launch the barcode scanner or OCR scanner.
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.
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.
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.
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.