Text Field & Numeric Textfield

<br>
<!-- Numeric Textfield -->
<form action="#">
    <div class="mdl-textfield mdl-js-textfield">
        <input type="text" class="mdl-textfield__input" id="sample2" pattern="-?[0-9]*(.[0-9]+)?">
        <label for="sample2" class="mdl-textfield__label">Numeric Textfield</label>
        <span class="mdl-textfield__error">Input is not a number!</span>
    </div>
`</pre>

</form>

<pre>`&lt;!-- Simple Textfield --&gt;
    &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield"&gt;
            &lt;input type="text" class="mdl-textfield__input" id="sample1"&gt;
            &lt;label for="sample1" class="mdl-textfield__label"&gt;PlaceHolder..&lt;/label&gt;
        &lt;/div&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;!-- Numeric Textfield --&gt;
    &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield"&gt;
            &lt;input type="text" class="mdl-textfield__input" id="sample2" pattern="-?[0-9]*(.[0-9]+)?"&gt;
            &lt;label for="sample2" class="mdl-textfield__label"&gt;Numeric Textfield&lt;/label&gt;
            &lt;span class="mdl-textfield__error"&gt;Input is not a number!&lt;/span&gt;
        &lt;/div&gt;
    &lt;/form&gt;
`</pre>

### Floating Label Textfield

<!-- Floating Label -->

<form action="#">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input type="text" class="mdl-textfield__input" id="sample3">
            <label for="sample3" class="mdl-textfield__label">Floating</label>
        </div>
</form>

<pre>`&lt;!-- Floating Label --&gt;
    &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt;
            &lt;input type="text" class="mdl-textfield__input" id="sample3"&gt;
            &lt;label for="sample3" class="mdl-textfield__label"&gt;Floating&lt;/label&gt;
        &lt;/div&gt;
    &lt;/form&gt;
`</pre>

### Multiple Line Textfield

<!-- Multiple Line -->

<form action="#">
        <div class="mdl-textfield mdl-js-textfield">
            <textarea name="" id="sample4" cols="30" rows="3" class="mdl-textfield__input" type="text"></textarea>
            <label for="sample4" class="mdl-textfield__label">Multiple Line</label>
        </div>
</form>

<pre>`    &lt;!-- Multiple Line --&gt;
    &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield"&gt;
            &lt;textarea name="" id="sample4" cols="30" rows="3" class="mdl-textfield__input" type="text"&gt;&lt;/textarea&gt;
            &lt;label for="sample4" class="mdl-textfield__label"&gt;Multiple Line&lt;/label&gt;
        &lt;/div&gt;
    &lt;/form&gt;
`</pre>

### Expandable Textfield

<!-- Expandable Textfield -->

<form action="#">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
            <label for="sample5" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect">
                _S_
            </label>
            <div class="mdl-textfield__expandable-holder">
                <input type="text" class="mdl-textfield__input" id="sample5">
                <label for="sample5" class="mdl-textfield__label">Expandable Input</label>
            </div>
        </div>
</form>

<pre>`    &lt;!-- Expandable Textfield --&gt;
    &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"&gt;
            &lt;label for="sample5" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"&gt;
                &lt;i class="material-icons"&gt;S&lt;/i&gt;
            &lt;/label&gt;
            &lt;div class="mdl-textfield__expandable-holder"&gt;
                &lt;input type="text" class="mdl-textfield__input" id="sample5"&gt;
                &lt;label for="sample5" class="mdl-textfield__label"&gt;Expandable Input&lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;