The Material Design Lite (MDL) text field component is an enhanced version of the standard HTML and 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
...
2. Inside the div, code an element with a type attribute of "text" (the text field), and an id attribute of your choice.
3. Also inside the div, after the text field, code a 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.
User name
4. Optionally, add a pattern attribute and value to the element (see the W3C HTML5 forms specification for details) and an associated error message in a element following the .
User name
Letters and spaces only
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.
User name
Letters and spaces only
The single-line text field component is ready for use.
Examples
Single-line text field with a standard label.
First name
Single-line text field with a floating label.
Address line 1
Single-line text field with a standard label, pattern matching, and error message.
Phone
Digits only
To include a multi-line MDL text field component:
1. Code a
...
2. Inside the div, code a 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).
3. Also inside the div, after the text field, code a element with a for attribute whose value matches the element's id value, and a short string to be used as the field's placeholder text.
Full address
4. Add one or more MDL classes, separated by spaces, to the div container, text field, and field label using the class attribute.
Full address
The multi-line text field component is ready for use.
Examples
Multi-line text field with one visible input line.
Schools attended
Multi-line text field with one visible input line and floating label.
Schools attended
Multi-line text field with multiple visible input lines and a maximum number of lines.
Schools attended (max. 6)
To include an expandable MDL text field component:
1. Code an "outer"
...
2. Inside the div, code a element with a for attribute whose value will match the element's id value (to be coded in step 5).
...
3. Inside the label, code a element; the span should be empty, and should be the label's only content. This element will contain the expandable text field's icon.
4. Still inside the "outer" div, after the label containing the span, code an "inner" (nested)
...
5. Inside the "inner" div, code an 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.
6. Still inside the "inner" div, after the text field, code a element with a for attribute whose value also matches the element's id value (coded in step 5), and a short string to be used as the field's placeholder text.
Expandable text field
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.
The expandable text field component is ready for use. It will expand when the icon (the empty ) is clicked or gains focus.
Examples
Expandable text field with a standard label.
Expandable text field with a floating label.
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.This attribute may be added or removed programmatically via scripting.
