Material Design Lite - Textfields

Advertisements

Previous Page
Next Page  

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of text inputs. The following table lists down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-textfield

Identifies container as an MDL component and is required on "outer" div element.
2

mdl-js-textfield

Sets basic MDL behavior to input and is required on "outer" div element.
3

mdl-textfield__input

Identifies element as textfield input and is required on input or textarea element.
4

mdl-textfield__label

Identifies 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

Identifies span as an MDL error message and is optional; goes on span element for MDL input element with pattern.
7

mdl-textfield--expandable

Identifies a div as an MDL expandable text field container; used for expandable input fields, and is required on "outer" div element.
8

mdl-button

Identifies label as an MDL icon button; used for expandable input fields, and is required on "outer" div's label element.
9

mdl-js-button

Sets basic behavior to icon container; used for expandable input fields, and is required on "outer" div's label element.
10

mdl-button--icon

Identifies 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

Identifies a container as an MDL component; used for expandable input fields, and is required on "inner" div element.
12

is-invalid

Identifies the textfield as invalid on initial load and is optional on mdl-textfield element.

Example

The following example will help you understand the use of the mdl-textfield classes to show the different types of textfields.

mdl_textfields.htm

Live Demo 
<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Text Field</td><td>Numeric Text Field</td>
            <td>Disabled Text Field</td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
                     <label class = "mdl-textfield__label" for = "text2">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        id = "text3" disabled>
                     <label class = "mdl-textfield__label" for = "text3">
                        Disabled...</label>
                  </div>
               </form>
            </td>
         </tr>
         
         <tr><td>Simple Text Field with Floating Label</td>
            <td>Numeric Text Field with Floating Label</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" id = "text4">
                     <label class = "mdl-textfield__label" for = "text4">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
                     <label class = "mdl-textfield__label" for = "text5">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
         
         <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <textarea class = "mdl-textfield__input" type = "text" rows =  "3" 
                        id = "text7" ></textarea>
                     <label class = "mdl-textfield__label" for = "text7">Lines...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                     <label class = "mdl-button mdl-js-button mdl-button--icon" 
                        for = "text8">
                        <i class = "material-icons">search</i>
                     </label>
                     <div class = "mdl-textfield__expandable-holder">
                        <input class = "mdl-textfield__input" type = "text" id = "text8">
                        <label class = "mdl-textfield__label" for = "sample-expandable">
                           Expandable Input</label>
                     </div>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>   
   </body>
</html>

Result

Verify the result.

Advertisements