Material Design Lite Textfields - Material Design Lite

How to use Material Design Lite Textfields?

The MDL text fields supports different CSS classes to provide predefined visual and behavioral enhancements to showcase various types of text inputs. Here are available classes and their effects.
S.N.
Class Name & Description
1
mdl-textfield
Determines container as an MDL component and is required on "outer" div element.
2
mdl-js-textfield
Supports basic MDL behavior to input and is required on "outer" div element.
3
mdl-textfield__input
Determines element as textfield input and is required on input or textarea element.
4
mdl-textfield__label
Determines element as textfield label and is required on label element for input or textarea elements.
5
mdl-textfield--floating-label
Applies floating label effect and is optional; goes on "outer" div element.
6
mdl-textfield__error
Determines span as an MDL error message and is optional; goes on span element for MDL input element with pattern.
7
mdl-textfield--expandable
Determines a div as an MDL expandable text field container; used for expandable input fields, and is required on "outer" div element.
8
mdl-button
Determines label as an MDL icon button; used for expandable input fields, and is required on "outer" div's label element.
9
mdl-js-button
Supports basic behavior to icon container; used for expandable input fields, and is required on "outer" div's label element.
10
mdl-button--icon
Determines label as an MDL icon container; used for expandable input fields, and is required on "outer" div's label element.
11
mdl-input__expandable-holder
Determines a container as an MDL component; used for expandable input fields, and is required on "inner" div element.
12
is-invalid
Determines the textfield as invalid on initial load and is optional on mdl-textfield element.

Example

Below example explains the use of mdl-textfield classes to apply different types of textfields.
mdl_textfields.htm

Result

Verify the result.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics