Form Inputs
Default Inputmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<input id="name" type="text">
<label for="name">Name</label>
</div>
</form>
Input With Helper Textmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<input id="name1" type="text">
<label for="name1">Name</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</form>
Passwordmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<input id="pwd" type="password">
<label for="pwd">Password</label>
</div>
</form>
Disabled Inputmore_vert
Add attribute disabled to disable input field.
Codeclose
<form>
<div class="input-field">
<input disabled id="name2" type="text">
<label for="name2">Name</label>
</div>
</form>
Predefined Input Valuemore_vert
Add attribute value="VALUE" to set predefined value.
Codeclose
<form>
<div class="input-field">
<input id="name3" type="text" value="Jon Doe">
<label for="name3">Name</label>
</div>
</form>
Readonly Input Fieldmore_vert
Add attribute readonly="readonly" to set field readonly.
Codeclose
<form>
<div class="input-field">
<input id="name4" type="text" value="Jon Doe" readonly="readonly">
<label for="name4">Name</label>
</div>
</form>
Input With Placeholdermore_vert
Add attribute placeholder="..." to input area.
Codeclose
<form>
<div class="input-field">
<input id="email" type="email" placeholder="enter email here">
<label for="email">Name</label>
</div>
</form>
Input With Iconmore_vert
Add class prefix to icon prefix.
Codeclose
<form class="m-t-40">
<div class="input-field">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text">
<label for="icon_prefix">First Name</label>
</div>
</form>
Maximum Valuemore_vert
Add attribute maxlength="NUMBER" to input area.
Codeclose
<form>
<div class="input-field">
<input id="name5" type="text" maxlength="6">
<label for="name5">Name</label>
</div>
</form>
Minimum Valuemore_vert
Add attribute minlength="NUMBER" to input area.
Codeclose
<form>
<div class="input-field">
<input id="name6" type="text" minlength="5">
<label for="name6">Name</label>
</div>
</form>
Input Type Textmore_vert
Using input type="text"
Codeclose
<form>
<div class="input-field">
<input id="a" type="text" value="Jon Doe">
<label for="a">Name</label>
</div>
</form>
Input Type Passwordmore_vert
Using input type="password"
Codeclose
<form>
<div class="input-field">
<input id="a1" type="password" value="123456">
<label for="a1">Password</label>
</div>
</form>
Input Phone Numbermore_vert
Using input type="tel"
Codeclose
<form>
<div class="input-field">
<input id="a2" type="tel" value="1-(444)-444-4445">
<label for="a2">Number</label>
</div>
</form>
Input Type Emailmore_vert
Using input type="email"
Codeclose
<form>
<div class="input-field">
<input id="a3" type="email" value="a@b.com">
<label for="a3">Email</label>
</div>
</form>
Input Type URLmore_vert
Using input type="url"
Codeclose
<form>
<div class="input-field">
<input id="a4" type="url" value="http://google.com">
<label for="a4">URL</label>
</div>
</form>
Input Type Searchmore_vert
Using input type="search"
Codeclose
<form>
<div class="input-field">
<input id="a5" type="search" value="how to...">
<label for="a5">Search</label>
</div>
</form>
Input Type Numbersmore_vert
Using input type="number"
Codeclose
<form>
<div class="input-field">
<input id="a6" type="number" value="45">
<label for="a6">Numbers</label>
</div>
</form>
Input Type Date Timemore_vert
Using input type="datetime-local"
Codeclose
<form>
<div class="input-field">
<input id="a7" type="datetime-local" value="2008-05-13T22:33:00">
</div>
</form>
Input Type Datemore_vert
Using input type="date"
Codeclose
<form>
<div class="input-field">
<input id="a8" type="date" value="2008-05-13">
</div>
</form>
Input Type Timemore_vert
Using input type="time"
Codeclose
<form>
<div class="input-field">
<input id="a9" type="time" value="22:33:00">
</div>
</form>
Input Type Rangemore_vert
Using input type="range"
Codeclose
<form class="m-t-40">
<div class="input-field">
<input id="a" type="range" min="0" max="100">
</div>
</form>
Textareamore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Textarea</label>
</div>
</form>
Textarea With Placeholdermore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<textarea id="textarea1" class="materialize-textarea" placeholder="enter text here"></textarea>
<label for="textarea1">Textarea</label>
</div>
</form>
Textarea With Iconmore_vert
Add class prefix to icon prefix.
Codeclose
<form>
<div class="input-field">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea"></textarea>
<label for="icon_prefix2">Message</label>
</div>
</form>
Input With Countermore_vert
Using data-length="10"
Codeclose
<form>
<div class="input-field">
<input id="input_text" type="text" data-length="10">
<label for="input_text">Input text</label>
</div>
</form>
Textarea With Countermore_vert
Using data-length="10"
Codeclose
<form>
<div class="input-field">
<textarea id="textarea2" class="materialize-textarea" data-length="120"></textarea>
<label for="textarea2">Textarea</label>
</div>
</form>
Select Menumore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
</form>
Multiple Select Menumore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
</form>
Select With Optgroupsmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<select>
<optgroup label="team 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</optgroup>
<optgroup label="team 2">
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</optgroup>
</select>
<label>Optgroups</label>
</div>
</form>
Select with Imagesmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<select class="icons">
<option value="" disabled selected>Choose your option</option>
<option value="" data-icon="../assets/images/sample-1.jpg">example 1</option>
<option value="" data-icon="../assets/images/office.jpg">example 2</option>
<option value="" data-icon="../assets/images/yuna.jpg">example 3</option>
</select>
<label>Images in select</label>
</div>
</form>
Browser Default Menumore_vert
Codeclose
<form class="m-t-40">
<label>Browser Select</label>
<select class="browser-default">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
Disabled Select Menumore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<select disabled>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Disabled</label>
</div>
</form>
File Inputmore_vert
Codeclose
<form class="m-t-40">
<div class="file-field input-field">
<div class="btn blue darken-1">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
Multiple File Inputmore_vert
Codeclose
<form class="m-t-40">
<div class="file-field input-field">
<div class="btn blue darken-1">
<span>File</span>
<input type="file" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files">
</div>
</div>
</form>
Left Helper Textmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<input id="name1" type="text">
<label for="name1">Name</label>
<span class="helper-text left-align blue darken-1 white-text" data-error="wrong" data-success="right">Helper align to left</span>
</div>
</form>
Center Helper Textmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<input id="name1" type="text">
<label for="name1">Name</label>
<span class="helper-text center-align blue darken-1 white-text" data-error="wrong" data-success="right">Helper align to center</span>
</div>
</form>
Right Helper Textmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<input id="name1" type="text">
<label for="name1">Name</label>
<span class="helper-text right-align blue darken-1 white-text" data-error="wrong" data-success="right">Helper align to right</span>
</div>
</form>
Input Error Messagemore_vert
Add attribute data-error="wrong" for error message.
Codeclose
<form>
<div class="input-field">
<input id="email1" type="email" class="validate">
<label for="email1">Email</label>
<span class="helper-text" data-error="wrong">Helper text</span>
</div>
</form>
Input Success Messagemore_vert
Add attribute data-success="right" for success message.
Codeclose
<form>
<div class="input-field">
<input id="email2" type="email" class="validate">
<label for="email2">Email</label>
<span class="helper-text" data-success="right">Helper text</span>
</div>
</form>
Inline Helper Textmore_vert
Codeclose
<form class="m-t-40">
<div class="row">
<div class="col s8">
<div class="input-field">
<input id="name1" type="text">
<label for="name1">Name</label>
</div>
</div>
<div class="col s4 m-t-30">
<div class="input-field">
<span class="helper-text" data-error="wrong" data-success="right">Inline Helper text</span>
</div>
</div>
</div>
</form>
Inline Helper Text With Colormore_vert
Codeclose
<form class="m-t-40">
<div class="row">
<div class="col s8">
<div class="input-field">
<input id="name1" type="text">
<label for="name1">Name</label>
</div>
</div>
<div class="col s4 m-t-30">
<div class="input-field">
<span class="helper-text white-text blue darken-1 center-align" data-error="wrong" data-success="right">Inline Helper text</span>
</div>
</div>
</div>
</form>
Tooltip Bottommore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<input class="tooltipped" id="name1" type="text" data-trigger="focus" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">
<label for="name1">Name</label>
<span class="helper-text" data-error="wrong" data-success="right">Inline Helper text</span>
</div>
</form>
Tooltip Rightmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<input class="tooltipped" id="name1" type="text" data-trigger="focus" data-position="right" data-delay="50" data-tooltip="I am a tooltip">
<label for="name1">Name</label>
<span class="helper-text" data-error="wrong" data-success="right">Inline Helper text</span>
</div>
</form>
Tooltip Topmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<input class="tooltipped" id="name1" type="text" data-trigger="focus" data-position="top" data-delay="50" data-tooltip="I am a tooltip">
<label for="name1">Name</label>
<span class="helper-text" data-error="wrong" data-success="right">Inline Helper text</span>
</div>
</form>
Tooltip Leftmore_vert
Codeclose
<form class="m-t-40">
<div class="input-field">
<input class="tooltipped" id="name1" type="text" data-trigger="focus" data-position="left" data-delay="50" data-tooltip="I am a tooltip">
<label for="name1">Name</label>
<span class="helper-text" data-error="wrong" data-success="right">Inline Helper text</span>
</div>
</form>
Basic Switch Togglemore_vert
Switch Default
Switch Unchecked
Switch Checked and Disabled
Switch Disabled
Codeclose
<div class="row m-t-20">
<div class="col s2">
<div class="switch">
<label>
<input checked type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
<div class="col s10">
<span class="m-l-10">Switch Default</span>
</div>
</div>
<div class="row m-t-20">
<div class="col s2">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
<div class="col s10">
<span class="m-l-10">Switch Unchecked</span>
</div>
</div>
<div class="row m-t-20">
<div class="col s2">
<div class="switch">
<label>
<input checked disabled type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
<div class="col s10">
<span class="m-l-10">Switch Checked and Disabled</span>
</div>
</div>
<div class="row m-t-20">
<div class="col s2">
<div class="switch">
<label>
<input disabled type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
<div class="col s10">
<span class="m-l-10">Switch Disabled</span>
</div>
</div>
Material Checkboxmore_vert
Codeclose
<p>
<label>
<input type="checkbox" checked="checked" />
<span>Default Checked</span>
</label>
</p>
<p>
<label>
<input type="checkbox" unchecked="checked" />
<span>Checkbox Unchecked</span>
</label>
</p>
<p>
<label>
<input type="checkbox" checked="checked" disabled />
<span>Checkbox Checked and Disabled</span>
</label>
</p>
<p>
<label>
<input type="checkbox" disabled />
<span>Checkbox Disabled</span>
</label>
</p>
Material Radio Buttonmore_vert
Codeclose
<p>
<label>
<input name="group1" type="radio" checked />
<span>Default Radio button Checked</span>
</label>
</p>
<p>
<label>
<input name="group2" type="radio" />
<span>Radio button Unchecked</span>
</label>
</p>
<p>
<label>
<input name="group3" type="radio" checked="checked" disabled />
<span>Radio button Checked and Disabled</span>
</label>
</p>
<p>
<label>
<input name="group4" type="radio" disabled />
<span>Radio button Disabled</span>
</label>
</p>
Form Chipsmore_vert
To add tags,type sometext and enter.
Codeclose
<div class="chips"></div>
Form Chips Placeholdermore_vert
Use placeholders and override hint texts.
Codeclose
<div class="chips"></div>
Form Chips Autocompletemore_vert
Use autocomplete with chips.
Codeclose
<div class="chips chips-autocomplete"></div>
Form Initial Chipsmore_vert
Set initial tags.
Codeclose
<div class="chips chips-initial"></div>