Text Input controls are used to request a text entry from users. They are normally found in Create or Edit modal as a part to complete the task.
Depends on the length of the text, there are three types of Text Input controls to use.
Single-line text: Use Text Field with or without label
Multiline text: Use Text View
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 (e.g., “Title” or “Description”). Vague directions should be avoided (e.g., “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
When a create modal contains a large number of text entries, such as a form used to generate a new customer profile, the Text Field with Label is recommended. This component gives users a better understanding of the purpose of each text entry.
The Label should describe the purpose of the text field, and there should be placeholder content in the field itself before the user has entered data. This placeholder can be used to indicate whether the field is required or optional to ensure users don’t miss any required entries.
The Text Field with Label component can be grouped with other cell types in create view to provide a strong sense of information hierarchy.
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 will allow 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.
Tapping on any of the Text Input control 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.