Forms Elements

Forms are the standard way to receive user inputted data. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms.

Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have a .input-field div wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea form elements.

The validate class leverages HTML5 validation and will add a valid and invalid class accordingly. If you don't want the Green and Red validation states, just remove the validate class from your inputs.

First Name

Last Name

Disabled

Password

This is an inline input field:

HTML

                        
<div class="row">
    <form class="col s12">
        <div class="row">
        <div class="input-field col s6">
            <input placeholder="Placeholder" id="first_name" type="text" class="validate">
            <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s6">
            <input id="last_name" type="text" class="validate">
            <label for="last_name">Last Name</label>
        </div>
        </div>
        <div class="row">
        <div class="input-field col s12">
            <input disabled value="I am not editable" id="disabled" type="text" class="validate">
            <label for="disabled">Disabled</label>
        </div>
        </div>
        <div class="row">
        <div class="input-field col s12">
            <input id="password" type="password" class="validate">
            <label for="password">Password</label>
        </div>
        </div>
        <div class="row">
        <div class="input-field col s12">
            <input id="email" type="email" class="validate">
            <label for="email">Email</label>
        </div>
        </div>
        <div class="row">
        <div class="col s12">
            This is an inline input field:
            <div class="input-field inline">
            <input id="email1" type="email" class="validate">
            <label for="email1" data-error="wrong" data-success="right">Email</label>
            </div>
        </div>
        </div>
    </form>
</div>

If you are having trouble with the labels overlapping prefilled content, Try adding class="active" to the label.
You can also call the function Materialize.updateTextFields(); to reinitialize all the Materialize labels on the page if you are dynamically adding inputs.

First Name

HTML
JS

                        
<div class="row">
    <div class="input-field col s6">
        <input value="Alvin" id="first_name2" type="text" class="validate">
        <label class="active" for="first_name2">First Name</label>
    </div>
</div>

                        
$(document).ready(function() {
    Materialize.updateTextFields();
})

You can add an icon prefix to make the form input label even more clear. Just add an icon with the class prefix before the input and label.

HTML

                        
<div class="row">
    <form class="col s12">
        <div class="row">
        <div class="input-field col s6">
            <i class="material-icons prefix">account_circle</i>
            <input id="icon_prefix" type="text" class="validate">
            <label for="icon_prefix">First Name</label>
        </div>
        <div class="input-field col s6">
            <i class="material-icons prefix">phone</i>
            <input id="icon_telephone" type="tel" class="validate">
            <label for="icon_telephone">Telephone</label>
        </div>
        </div>
    </form>
</div>

You can add custom validation messages by adding either data-error or data-success attributes to your input field labels.

HTML

                        
<div class="row">
    <form class="col s12">
        <div class="row">
        <div class="input-field col s12">
            <input id="email2" type="email" class="validate">
            <label for="email2" data-error="wrong" data-success="right">Email</label>
        </div>
        </div>
    </form>
</div>

Here is a CSS template for modifying input fields in CSS. With Sass, you can achieve this by just changing a variable. The CSS shown below is unprefixed. Depending on what you use, you may have to change the type attribute selector.

                        
/* label color */
.input-field label {
    color: #000;
}
/* label focus color */
.input-field input[type=text]:focus + label {
    color: #000;
}
/* label underline focus color */
.input-field input[type=text]:focus {
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #000;
}
/* valid color */
.input-field input[type=text].valid {
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #000;
}
/* invalid color */
.input-field input[type=text].invalid {
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #000;
}
/* icon prefix focus color */
.input-field .prefix.active {
    color: #000;
}

Textareas allow larger expandable user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have a .input-field div wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea form elements.

Textareas will auto resize to the text inside.

HTML

                        
<div class="row">
    <form class="col s12">
        <div class="row">
        <div class="input-field col s12">
            <textarea id="textarea1" class="materialize-textarea"></textarea>
            <label for="textarea1">Textarea</label>
        </div>
        </div>
    </form>
</div>

<div class="row">
    <form class="col s12">
        <div class="row">
        <div class="input-field col s12">
            <i class="material-icons prefix">mode_edit</i>
            <textarea id="icon_prefix2" class="materialize-textarea"></textarea>
            <label for="icon_prefix2">Message</label>
        </div>
        </div>
    </form>
</div>

Select allows user input through specified options. Make sure you wrap it in a .input-field for proper alignment with other text fields. Remember that this is a jQuery plugin so make sure you initialize this in your document ready.

Materialize Select

Materialize Multiple Select

Optgroups

Images in select

Browser Select Materialize Disabled Browser Disabled

HTML
js

                        
<div class="row">
  <div class="input-field col s12">
    <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>

  <div class="input-field col s12">
    <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>

  <div class="input-field col s12">
    <select multiple>
      <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>

  <div class="input-field col s12 m6">
    <select class="icons">
      <option value="" disabled selected>Choose your option</option>
      <option value="" data-icon="../../img/sample-1.jpg" class="circle">example 1</option>
      <option value="" data-icon="../../img/office.jpg" class="circle">example 2</option>
      <option value="" data-icon="../../img/yuna.jpg" class="circle">example 1</option>
    </select>
    <label>Images in select</label>
  </div>
  <div class="input-field col s12 m6">
    <select class="icons">
      <option value="" disabled selected>Choose your option</option>
      <option value="" data-icon="../../img/sample-1.jpg" class="left circle">example 1</option>
      <option value="" data-icon="../../img/office.jpg" class="left circle">example 2</option>
      <option value="" data-icon="../../img/yuna.jpg" class="left circle">example 3</option>
    </select>
    <label>Images in select</label>
  </div>

  <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>

  <label>Materialize Disabled</label>
  <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>Browser Disabled</label>
  <select class="browser-default" 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>
</div>

                        
  $(document).ready(function() {
    $('select').material_select();
  });

Radio Buttons are used when the user must make only one selection out of a group of items.

HTML

                        
<form action="#">
    <p>
        <input name="group1" type="radio" id="r-test1" class="default" />
        <label for="r-test1">Default</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test2" checked class="red" />
        <label for="r-test2">Red</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test3" class="yellow" />
        <label for="r-test3">Yellow</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test4" class="green" />
        <label for="r-test4">Green</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test5" disabled="disabled" />
        <label for="r-test5">Disabled</label>
    </p>
    <p>
        <input name="group1" type="radio" checked id="r-test6" class="pink" />
        <label for="r-test6">Pink</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test7" class="purple" />
        <label for="r-test7">Purple</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test8" class="deep-purple" />
        <label for="r-test8">Deep Purple</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test9" class="indigo" />
        <label for="r-test9">Indigo</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test10" class="teal" />
        <label for="r-test10">Teal</label>
    </p>
</form>

HTML

                        
<form action="#">
    <p>
        <input name="group1" type="radio" id="r-test11" checked class="with-gap default" />
        <label for="r-test11">Default</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test12" class="with-gap red" />
        <label for="r-test12">Red</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test13" class="with-gap yellow" />
        <label for="r-test13">Yellow</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test14" class="with-gap green" />
        <label for="r-test14">Green</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test15" disabled="disabled" class="with-gap" />
        <label for="r-test15">Disabled</label>
    </p>
    <p>
        <input name="group1" type="radio" checked id="r-test16" class="with-gap pink" />
        <label for="r-test16">Pink</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test17" class="with-gap purple" />
        <label for="r-test17">Purple</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test18" class="with-gap deep-purple" />
        <label for="r-test18">Deep Purple</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test19" class="with-gap indigo" />
        <label for="r-test19">Indigo</label>
    </p>
    <p>
        <input name="group1" type="radio" id="r-test20" class="with-gap teal" />
        <label for="r-test20">Teal</label>
    </p>
</form>

Use checkboxes when looking for yes or no answers. The for attribute is necessary to bind our custom checkbox with the input. Add the input's id as the value of the for attribute of the label.

HTML

                        
<form action="#">
    <p>
        <input type="checkbox" id="c-test1" checked="checked" class="default" />
        <label for="c-test1">Default</label>
    </p>
    <p>
        <input type="checkbox" id="c-test2" class="red" />
        <label for="c-test2">Red</label>
    </p>
    <p>
        <input type="checkbox" id="c-test3" class="yellow" />
        <label for="c-test3">Yellow</label>
    </p>
    <p>
        <input type="checkbox" id="c-test4" class="green" />
        <label for="c-test4">Green</label>
    </p>
    <p>
        <input type="checkbox" id="test5" checked disabled="disabled" />
        <label for="test5">Disabled</label>
    </p>
    <p>
        <input type="checkbox" id="test6" disabled="disabled" />
        <label for="test6">Disabled</label>
    </p>
    <p>
        <input type="checkbox" id="c-test7" class="pink" />
        <label for="c-test7">Pink</label>
    </p>
    <p>
        <input type="checkbox" id="c-test8" class="purple" />
        <label for="c-test8">Purple</label>
    </p>
    <p>
        <input type="checkbox" id="c-test9" checked="checked" class="deep-purple" />
        <label for="c-test9">Deep Purple</label>
    </p>
    <p>
        <input type="checkbox" id="c-test10" class="indigo" />
        <label for="c-test10">Indigo</label>
    </p>
    <p>
        <input type="checkbox" id="test11" class="teal" />
        <label for="test11">Teal</label>
    </p>
</form>

HTML

                        
<form action="#">
    <p>
        <input type="checkbox" id="c-test12" checked="checked" class="filled-in default" />
        <label for="c-test12">Default</label>
    </p>
    <p>
        <input type="checkbox" id="c-test13" class="filled-in red" />
        <label for="c-test13">Red</label>
    </p>
    <p>
        <input type="checkbox" id="c-test14" class="filled-in yellow" />
        <label for="c-test14">Yellow</label>
    </p>
    <p>
        <input type="checkbox" id="c-test15" class="filled-in green" />
        <label for="c-test15">Green</label>
    </p>
    <p>
        <input type="checkbox" id="test16" checked disabled="disabled" class="filled-in " />
        <label for="test16">Disabled</label>
    </p>
    <p>
        <input type="checkbox" id="c-test18" class="filled-in pink" />
        <label for="c-test18">Pink</label>
    </p>
    <p>
        <input type="checkbox" id="c-test19" class="filled-in purple" />
        <label for="c-test19">Purple</label>
    </p>
    <p>
        <input type="checkbox" id="c-test20" checked="checked" class="filled-in deep-purple" />
        <label for="c-test20">Deep Purple</label>
    </p>
    <p>
        <input type="checkbox" id="c-test21" class="filled-in indigo" />
        <label for="c-test21">Indigo</label>
    </p>
    <p>
        <input type="checkbox" id="test22" class="filled-in teal" />
        <label for="test22">Teal</label>
    </p>
</form>

Off On Default

Off On Red

Off On Yellow

Off On Green

Off On Disabled

Off On Pink

Off On Purple

Off On Deep Purple

Off On Indigo

Off On Teal

HTML

                        
<div class="switch">
    <label>
    Off
    <input type="checkbox" checked class="default">
    <span class="lever"></span>
    On
    </label>
    <span class="title"> Default</span>
</div>

<div class="switch">
    <label>
    Off
    <input type="checkbox" checked class="red">
    <span class="lever"></span>
    On
    </label>
    <span class="title"> Red</span>
</div>

<div class="switch">
    <label>
    Off
    <input type="checkbox" checked class="yellow">
    <span class="lever"></span>
    On
    </label>
    <span class="title"> Yellow</span>
</div>

<div class="switch">
    <label>
    Off
    <input type="checkbox" checked class="green ">
    <span class="lever"></span>
    On
    </label>
    <span class="title"> Green</span>
</div>

<div class="switch">
    <label>
    Off
    <input disabled type="checkbox">
    <span class="lever"></span>
    On
    </label>
    <span class="title"> Disabled</span>
</div>

<div class="switch">
    <label>
    Off
    <input type="checkbox" checked class="pink">
    <span class="lever"></span>
    On
    </label>
    <span class="title"> Pink</span>
</div>

<div class="switch">
    <label>
    Off
    <input type="checkbox" checked class="purple">
    <span class="lever"></span>
    On
    </label>
    <span class="title"> Purple</span>
</div>

<div class="switch">
    <label>
    Off
    <input type="checkbox" checked class="deep-purple">
    <span class="lever"></span>
    On
    </label>
    <span class="title"> Deep Purple</span>
</div>

<div class="switch">
    <label>
    Off
    <input type="checkbox" checked class="indigo ">
    <span class="lever"></span>
    On
    </label>
    <span class="title"> Indigo</span>
</div>

<div class="switch">
    <label>
    Off
    <input type="checkbox" checked class="teal ">
    <span class="lever"></span>
    On
    </label>
    <span class="title"> Teal</span>
</div>

If you want to style an input button with a path input we provide this structure.

HTML

                        
  <form action="#">
    <div class="file-field input-field">
      <div class="btn default">
        <span>File</span>
        <input type="file">
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
  </form>

  <form action="#">
    <div class="file-field input-field">
      <div class="btn default">
        <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>

HTML

                        
  <form action="#">
    <p class="range-field">
      <input type="range" id="test47" min="0" max="100" />
    </p>
  </form>

We use a modified version of pickadate.js to create a materialized date picker. Test it out below!

HTML
JS

                        
  <input type="date" class="datepicker">

                        
  $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15 // Creates a dropdown of 15 years to control year
  });

Use a character counter in fields where a character restriction is in place.

HTML
JS

                        
    <div class="row">
      <form class="col s12">
        <div class="row">
          <div class="input-field col s6">
            <input id="input_text" type="text" length="10">
            <label for="input_text">Input text</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <textarea id="textarea98" class="materialize-textarea" length="120"></textarea>
            <label for="textarea98">Textarea</label>
          </div>
        </div>
      </form>
    </div>

                        
  $(document).ready(function() {
    $('input#input_text, textarea#textarea1').characterCounter();
  });

Add an autocomplete dropdown below your input to suggest possible values.

Autocomplete

HTML
JS

                        
  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>

                        
  $('input.autocomplete').autocomplete({
    data: {
      "Apple": null,
      "Microsoft": null,
      "Google": 'http://placehold.it/250x250'
    }
  });

Forms Elements

Input fields

Prefilling Text Inputs

Icon Prefixes

Custom Error or Success Messages

Changing colors

Textarea

Select

Radio Buttons

Default

With Gap

Checkboxes

Default

Filled In

Switches

File Input

HTML5 Range

Date Picker

Character Counter

Autocomplete