<div class="demo-preview-block"> <form action="#"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="sample1"> <label class="mdl-textfield__label" for="sample1">Type Something...</label> </div> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="sample2"> <label class="mdl-textfield__label" for="sample2">Number...</label> <span class="mdl-textfield__error">Input is not a number!</span> </div> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" disabled id="sample3" value="Hello (value in disabled field)"> <label class="mdl-textfield__label" for="sample3">I'm Disabled</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="sample5"> <label class="mdl-textfield__label" for="sample5">Number...</label> <span class="mdl-textfield__error">Input is not a number!</span> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="sample4"> <label class="mdl-textfield__label" for="sample4">Text Input</label> </div> <div class="mdl-textfield mdl-js-textfield"> <textarea class="mdl-textfield__input" type="text" rows="1" id="sample6"></textarea> <label class="mdl-textfield__label" for="sample6">Type multiple lines here...</label> </div> <div class="mdl-textfield mdl-js-textfield"> <textarea class="mdl-textfield__input" type="text" rows="3" id="sample7"></textarea> <label class="mdl-textfield__label" for="sample7">This input is 3 rows high</label> </div> <div class="mdl-textfield mdl-js-textfield"> <textarea class="mdl-textfield__input" type="text" maxrows="3" rows="1" id="sample8"></textarea> <label class="mdl-textfield__label" for="sample8">This input is at most 3 rows high</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <textarea class="mdl-textfield__input" type="text" rows="1" id="sample9"></textarea> <label class="mdl-textfield__label" for="sample9">Multiple lines and a floating label</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expandable"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" id="sample-expandable"> <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label> </div> </div> <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="sample-expandable-floating"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" id="sample-expandable-floating"> <label class="mdl-textfield__label" for="sample-expandable-floating">Expandable &amp; Floating Input</label> </div> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width"> Right/No Label: <label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean"> </div> </div> </form> </div>