1. Types
  2. Interactive Demo
  3. Usage
    1. Input type
    2. Labels
    3. Textarea
    4. Icons
    5. Prefix and suffix
    6. Supporting text
    7. Character counter
    8. Validation
      1. Constraint validation
      2. Manual validation
  4. Accessibility
  5. Filled text field
  6. Outlined text field
  7. Theming
    1. Filled text field tokens
    2. Filled text field example
    3. Outlined text field tokens
    4. Outlined text field example
  8. API
    1. MdFilledTextField <md-filled-text-field>
      1. Properties
      2. Methods
      3. Events
    2. MdOutlinedTextField <md-outlined-text-field>
      1. Properties
      2. Methods
      3. Events

Text field

Text fields let users enter text into a UI.

Several text fields in a form

Types

Link to “Types”
  1. Filled text field
  2. Outlined text field

Interactive Demo

Link to “Interactive Demo”

View interactive demo inline.

Open interactive demo in new tab.

Usage

Link to “Usage”

Text fields behave like <input> elements. They provide a container with labels for user input.

<md-filled-text-field label="Label" value="Value">
</md-filled-text-field>

<md-outlined-text-field label="Label" value="Value">
</md-outlined-text-field>

Input type

Link to “Input type”

A text field's type attribute changes how the text field works, such as displaying a different keyboard or providing default validation.

<md-filled-text-field label="Username" type="email">
</md-filled-text-field>

<md-filled-text-field label="Password" type="password">
</md-filled-text-field>
star

use the inputmode attribute for more control over the displayed keyboard.

Labels

Link to “Labels”

Text fields should label their value with a floating label, a placeholder, or an external label. Labels help the user understand what value to input.

First name
<md-outlined-text-field label="Favorite food">
</md-outlined-text-field>

<md-outlined-text-field placeholder="email@domain.com">
</md-outlined-text-field>

<div>First name</div>
<md-outlined-text-field aria-label="First name">
</md-outlined-text-field>
bookmark

text fields do not currently support aria-labelledby. External labels must provide an aria-label. See b/276484803.

Textarea

Link to “Textarea”

Multi-line text fields behave like <textarea> elements.

Textareas can specify the initial number of rows. Use CSS width, height, and resize to control the resize behavior of a textarea.

<style>
  md-filled-text-field {
    resize: vertical;
  }
</style>
<md-filled-text-field
    type="textarea"
    label="Vertical resize"
    rows="3">
</md-filled-text-field>

Icons

Link to “Icons”

Text fields may display optional icons. Use icons to describe the input method (such as a search icon), provide additional functionality (such as a clear icon), or to express errors.

searchvisibilityvisibility_offerror
<md-outlined-text-field placeholder="Search for messages">
  <md-icon slot="leading-icon">search</md-icon>
</md-outlined-text-field>

<md-outlined-text-field label="Password" type="password">
  <md-icon-button toggle slot="trailing-icon">
    <md-icon>visibility</md-icon>
    <md-icon slot="selected">visibility_off</md-icon>
  </md-icon-button>
</md-outlined-text-field>

<md-outlined-text-field
    label="Username"
    error
    error-text="Username not available">
  <md-icon slot="trailing-icon">error</md-icon>
</md-outlined-text-field>

Prefix and suffix

Link to “Prefix and suffix”

Add prefix-text and suffix-text attributes to text fields to display additional context for the value.

<md-outlined-text-field
    label="Dollar amount"
    type="number"
    value="0"
    prefix-text="$"
    suffix-text=".00">
</md-outlined-text-field>

Supporting text

Link to “Supporting text”

Supporting text conveys additional information about the input field, such as how it will be used. Supporting text can be replaced with error text when validating.

<md-filled-text-field
    label="Comments"
    supporting-text="Provide comments for the issue">
</md-filled-text-field>

<md-filled-text-field
    label="Name"
    required
    supporting-text="*required"
    error-text="Please fill out this field">
</md-filled-text-field>

Character counter

Link to “Character counter”

Text fields with a maxlength attribute will display a character counter.

<md-outlined-text-field label="Title" value="Short" maxlength="10">
</md-outlined-text-field>

Validation

Link to “Validation”

Text fields that validate can use constraint validation or manual validation.

Constraint validation

Link to “Constraint validation”

Text fields may validate using the browser's constraint validation API. Each input type above links to an article that describes how to validate it.

Text fields in a <form> will validate on submission, or by calling textField.reportValidity().