Skip to content

Overview

Text fields are one of the most common features of UI elements and appear almost everywhere throughout the UI. A text field consists of a horizontal line indicating where keyboard input can occur and, typically, text that clearly communicates the intended contents of the text field. The Material design text field component provides various types of text fields, and allows you to add both display and click effects.

Interactive text field demo

Visual variations for the different types of text fields.

Input types

Text input

Numeric input

Input is not a number!

Text with floating label

Numeric with floating label

Input is not a number!

Multiple line input

Expanding input field (expands on tap)