Text fields allow the user to input text. They can be single line, with or without scrolling, or multi-line, and can have an icon. Touching a text field places the cursor and automatically displays the keyboard. In addition to typing, text fields allow for a variety of other tasks, such as text selection (cut, copy, paste) and data lookup via auto-completion. See Patterns > Selection for text selection design.
Text fields can have different types. The type determines what kind of characters are allowed inside the field and may prompt the virtual keyboard to optimize its layout for frequently used characters. Common types include number, text, email address, phone number, person’s name, username, URL, street address, credit card number, PIN, and search query.
Single-line fields automatically scroll their content to the left as the text input cursor reaches the right edge of the input field.
When text input in a single-line field is long and spans multiple lines, the text field should scroll to accommodate the text.
In the scrolling text field, a graphical indicator appears below the line. Touching the ellipsis jumps the cursor back to the beginning of the string.
With floating inline labels, when the user engages with the text input field, the labels move to float above the field.
Multi-line text fields automatically break to a new line for overflow text and scroll vertically when the cursor reaches the lower edge.
Full-width text fields are useful for more in-depth tasks.
Use auto-complete text fields to present real-time suggestions or completions in popups, so users can enter information more accurately and efficiently.
The app bar can act as a text input field. As the user types, the content underneath it is filtered and sorted.
