material-design-lite/src/textfield

Introduction

The Material Design Lite (MDL) text field component is an enhanced version of the standard HTML <input type="text"> and <input type="textarea"> elements. 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 MDL text field component provides various types of text fields, and allows you to add both display and click effects.

Text fields are a common feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the text field component's Material Design specifications page for details.

The enhanced text field component has a more vivid visual look than a standard text field, and may be initially or programmatically disabled. There are three main types of text fields in the text field component, each with its own basic coding requirements. The types are single-line, multi-line, and expandable.

To include a single-line MDL text field component:

 1. Code a <div> element to hold the text field.

<div>
...
</div>

 2. Inside the div, code an <input> element with a type attribute of "text" (the text field), and an id attribute of your choice.

<div>
  <input type="text" id="user">
</div>

 3. Also inside the div, after the text field, code a <label> element with a for attribute whose value matches the input element's id value, and a short string to be used as the field's placeholder text.

<div>
  <input type="text" id="user">
  <label for="user">User name</label>
</div>

 4. Optionally, add a pattern attribute and value to the <input> element (see the W3C HTML5 forms specification for details) and an associated error message in a <span> element following the <label>.

<div>
  <input type="text" id="user" pattern="[A-Z,a-z, ]*">
  <label for="user">User name</label>
  <span>Letters and spaces only</span>
</div>

 5. Add one or more MDL classes, separated by spaces, to the div container, text field, field label, and error message using the class attribute.

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*">
  <label class="mdl-textfield__label" for="user">User name</label>
  <span class="mdl-textfield__error">Letters and spaces only</span>
</div>

The single-line text field component is ready for use.

Examples

Single-line text field with a standard label.

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="fname">
  <label class="mdl-textfield__label" for="fname">First name</label>
</div>

Single-line text field with a floating label.

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="addr1">
  <label class="mdl-textfield__label" for="addr1">Address line 1</label>
</div>

Single-line text field with a standard label, pattern matching, and error message.

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
  <label class="mdl-textfield__label" for="phone">Phone</label>
  <span class="mdl-textfield__error">Digits only</span>
</div>

To include a multi-line MDL text field component:

 1. Code a <div> element to hold the text field.

<div>
...
</div>

 2. Inside the div, code a <textarea> element with a type attribute of "text" (the multi-line text field), and an id attribute of your choice. Include a rows attribute with a value of "1" (this attribute sets the number of concurrently visible input rows).

<div>
  <textarea type="text" rows="1" id="address"></textarea>
</div>

 3. Also inside the div, after the text field, code a <label> element with a for attribute whose value matches the <textarea> element's id value, and a short string to be used as the field's placeholder text.

<div>
  <textarea type="text" rows="1" id="address"></textarea>
  <label for="address">Full address</label>
</div>

 4. Add one or more MDL classes, separated by spaces, to the div container, text field, and field label using the class attribute.

<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="1" id="address"></textarea>
  <label class="mdl-textfield__label" for="address">Full address</label>
</div>

The multi-line text field component is ready for use.

Examples

Multi-line text field with one visible input line.

<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="1" id="schools"></textarea>
  <label class="mdl-textfield__label" for="schools">Schools attended</label>
</div>

Multi-line text field with one visible input line and floating label.

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <textarea class="mdl-textfield__input" type="text" rows= "1" id="schools"></textarea>
  <label class="mdl-textfield__label" for="schools">Schools attended</label>
</div>

Multi-line text field with multiple visible input lines and a maximum number of lines.

<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="3" maxrows="6"
   id="schools"></textarea>
  <label class="mdl-textfield__label" for="schools">Schools attended (max. 6)</label>
</div>

To include an expandable MDL text field component:

 1. Code an "outer" <div> element to hold the expandable text field.

<div>
...
</div>

 2. Inside the div, code a <label> element with a for attribute whose value will match the <input> element's id value (to be coded in step 5).

<div>
  <label for="expando1">
  ...
  </label>
</div>

 3. Inside the label, code a <span> element; the span should be empty, and should be the label's only content. This element will contain the expandable text field's icon.

<div>
  <label for="expando1">
    <span></span>
  </label>
</div>

 4. Still inside the "outer" div, after the label containing the span, code an "inner" (nested) <div> element.

<div>
  <label for="expando1">
    <span></span>
  </label>
  <div>
  ...
  </div>
</div>

 5. Inside the "inner" div, code an <input> element with a type attribute of "text" (the text field), and an id attribute whose value matches that of the for attribute in step 2.

<div>
  <label for="expando1">
    <span></span>
  </label>
  <div>
    <input type="text" id="expando1">
  </div>
</div>

 6. Still inside the "inner" div, after the text field, code a <label> element with a for attribute whose value also matches the <input> element's id value (coded in step 5), and a short string to be used as the field's placeholder text.

<div>
  <label for="expando1">
    <span></span>
  </label>
  <div>
    <input type="text" id="expando1">
    <label for="expando1">Expandable text field</label>
  </div>
</div>

 7. Add one or more MDL classes, separated by spaces, to the "outer" div container, label, and span, and to the "inner" div container, text field, and field label using the class attribute.

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
  <label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
    <i class="material-icons">search</i>
  </label>
  <div class="mdl-textfield__expandable-holder">
    <input class="mdl-textfield__input" type="text" id="expando1">
    <label class="mdl-textfield__label" for="expando1">Expandable text field</label>
  </div>
</div>

The expandable text field component is ready for use. It will expand when the icon (the empty <span>) is clicked or gains focus.

Examples

Expandable text field with a standard label.

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
  <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
    <i class="material-icons">search</i>
  </label>
  <div class="mdl-textfield__expandable-holder">
    <input class="mdl-textfield__input" type="text" id="search-expandable">
    <label class="mdl-textfield__label" for="search-expandable">Search text</label>
  </div>
</div>

Expandable text field with a floating label.

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
 mdl-textfield--floating-label">
  <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable2">
    <i class="material-icons">search</i>
  </label>
  <div class="mdl-textfield__expandable-holder">
    <input class="mdl-textfield__input" type="text" id="search-expandable2">
    <label class="mdl-textfield__label" for="search-expandable2">
      Enter search text below
    </label>
  </div>
</div>

Configuration options

The MDL CSS classes apply various predefined visual and behavioral enhancements to the text field. The table below lists the available classes and their effects.

MDL class	Effect	Remarks
mdl-textfield	Defines container as an MDL component	Required on "outer" div element
mdl-js-textfield	Assigns basic MDL behavior to input	Required on "outer" div element
mdl-textfield__input	Defines element as textfield input	Required on input or textarea element
mdl-textfield__label	Defines element as textfield label	Required on label element for input or textarea elements
mdl-textfield--floating-label	Applies floating label effect	Optional; goes on "outer" div element
mdl-textfield__error	Defines span as an MDL error message	Optional; goes on span element for MDL input element with pattern
mdl-textfield--expandable	Defines a div as an MDL expandable text field container	For expandable input fields, required on "outer" div element
mdl-button	Defines label as an MDL icon button	For expandable input fields, required on "outer" div's label element
mdl-js-button	Assigns basic behavior to icon container	For expandable input fields, required on "outer" div's label element
mdl-button--icon	Defines label as an MDL icon container	For expandable input fields, required on "outer" div's label element
mdl-input__expandable-holder	Defines a container as an MDL component	For expandable input fields, required on "inner" div element
is-invalid	Defines the textfield as invalid on initial load.	Optional on mdl-textfield element

(1) The "search" icon is used here as an example. Other icons can be used by modifying the text. For a list of available icons, see this page.

Note: Disabled versions of each text field type are provided, and are invoked with the standard HTML boolean attribute disabled. <input class="mdl-textfield mdl-js-textfield" type="text" disabled> This attribute may be added or removed programmatically via scripting.