Text Field

You can allow users to enter text in an application using a text field. Tapping the text field activates the keypad and reveals a cursor.

You can use the following types of text fields:

  • Fixed single-line
  • Multi-line

In a fixed single-line text field, if the amount of text a user is entering exceeds the text field range, the entered text scrolls to the left and disappears so that the user can continue writing. When the expected text is short, such as a contact name or password, or when the available screen space is limited, the field can be restricted to a single line.

In a multi-line text field, the amount of text the user enters dictates the number of lines. When the user is expected to enter a lot of text, for example, a comment or message, a multi-line input can be used. The size of the field can be dynamically adjusted as more lines of text are created.

 

Figure: Text field

 

The Clear button is only available in single line text search field. As the user enters text in either type of a text field, the Clear button appears on the right side of the search field. Selecting this button instantly deletes any text inside the search field.

 

Video: Clear button interaction (click to play)

 

If possible, display a hint text that communicates to the user what the expected input is. On single line text fields a clear input can be added allowing the user to quickly erase all text and start over.

 

Figure: Guide text