Materialize CSS
  Prev Page
Next Page  
Materialize Forms
Materialize Forms are the standard way to receive user inputted data. It provides a very beautiful and responsive CSS for form designing. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms. The forms are Input fields, Textarea, Select, Radio Buttons, Checkboxes, Switches, File Input, Range, Date Picker, Time Picker, Character Counter, Autocomplete etc,..
Input Fields

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.

<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="email" type="email" class="validate">
        <label for="email" data-error="wrong" data-success="right">Email</label>
      </div>
    </div>
  </div>
</form>
</div>
Output :
Prefilling Text Inputs

Prefilling text input labels are overlapping in a content, Just add class="active" to the label.

First you can also call the function Materialize.updateTextFields(); to reinitialize all the Materialize labels on the page if you are dynamically adding inputs.

<div class="row">
	<form action="" method="post">
    	<div class="input-field col s6">
          <input value="Free Time Learning" id="first_name" type="text" class="validate">
          <label class="active" for="first_name">First Name</label>
        </div>
    </form>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    Materialize.updateTextFields();
  });
</script>
Output :
Icon Prefixes

Just add an icon with the prefix class before the input and label.

<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">email</i>
          <input id="icon_telephone" type="email" class="validate">
          <label for="icon_telephone">Email Id</label>
        </div>
      </div>
    </form>
</div>
Output :
Changing colors

Here is a CSS template for modifying input fields in CSS. With Sass, you can achieve this by just changing a variable. 

/* 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;
}
Textarea

Textareas allow larger expandable user input. Must have a .input-field div wrapping your input and label. This helps our jQuery animate the label.

When dynamically changing the value of a textarea with methods like jQuery's .val(), you must trigger an autoresize on it afterwords because .

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

<script type="text/javascript">
 $('#textarea').val('New Text');
 $('#textarea').trigger('autoresize');
</script>
Output :
Select Forms

Select forms allows user input through specified options. Make sure you wrap it in a .input-field for proper alignment with other text fields. 

<div class="row">
  <form action="" method="post">
      <div class="input-field col s12">
        <select>
          <option value="" disabled selected>Select Tutorial</option>
          <option value="HTML5">HTML5</option>
          <option value="CSS3">CSS3</option>
          <option value="Material Design">Material Design</option>
          <option value="Bootstrap 4">Bootstrap 4</option>
        </select>
        <label>Materialize Select</label>
      </div>
    
      <div class="input-field col s12">
        <select multiple>
          <option value="" disabled selected>Select Multiple Tutorials</option>
          <option value="HTML5">HTML5</option>
          <option value="CSS3">CSS3</option>
          <option value="Material Design">Material Design</option>
          <option value="Bootstrap 4">Bootstrap 4</option>
        </select>
        <label>Materialize Multiple Select</label>
      </div>
    
      <div class="input-field col s12">
        <select>
          <optgroup label="Basic">
            <option value="HTML5">HTML5</option>
            <option value="CSS3">CSS3</option>
          </optgroup>
          <optgroup label="Advance">
            <option value="Material Design">Material Design</option>
            <option value="Bootstrap 4">Bootstrap 4</option>
          </optgroup>
        </select>
        <label>Optgroups</label>
      </div>
    
      <div class="input-field col s12 m6">
        <select class="icons">
          <option value="" disabled selected>Select Tutorials</option>
          <option value="" data-icon="../images/html5.png" class="circle">HTML5</option>
          <option value="" data-icon="../images/css3.png" class="circle">CSS3</option>
          <option value="" data-icon="../images/materialize-circle.jpg" class="circle">Material Design</option>
          <option value="" data-icon="../images/bootstrap.png" class="circle">Bootstrap 4</option>
        </select>
        <label>Images in select</label>
      </div>
      <div class="input-field col s12 m6">
        <select class="icons">
          <option value="" disabled selected>Select Tutorials</option>
          <option value="" data-icon="../images/html5.png" class="left circle">HTML5</option>
          <option value="" data-icon="../images/css3.png" class="left circle">CSS3</option>
          <option value="" data-icon="../images/materialize-circle.jpg" class="left circle">Material Design</option>
          <option value="" data-icon="../images/bootstrap.png" class="left circle">Bootstrap 4</option>
        </select>
        <label>Images in select</label>
      </div>
      <div class="row">
      <label>Browser Select</label>
      <select class="browser-default">
          <option value="" disabled selected>Select Tutorials</option>
          <option value="HTML5">HTML5</option>
          <option value="CSS3">CSS3</option>
          <option value="Material Design">Material Design</option>
          <option value="Bootstrap 4">Bootstrap 4</option>
      </select>
      </div>
      <br />
      <h5>Disabled Styles</h5><br />
      <div class="input-field">
        <select disabled>
          <option value="" disabled selected>Select Tutorials</option>
          <option value="HTML5">HTML5</option>
          <option value="CSS3">CSS3</option>
          <option value="Material Design">Material Design</option>
          <option value="Bootstrap 4">Bootstrap 4</option>
        </select>
        <label>Materialize Disabled</label>
      </div>
    
      <label>Browser Disabled</label>
      <select class="browser-default" disabled>
        <option value="" disabled selected>Select Tutorials</option>
        <option value="HTML5">HTML5</option>
        <option value="CSS3">CSS3</option>
        <option value="Material Design">Material Design</option>
        <option value="Bootstrap 4">Bootstrap 4</option>
      </select>
  </form>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('select').material_select();
  });
</script>
Output :
Initialization

You must initialize the select element as shown below.

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

Radio Buttons are used when the user must make only one selection out of a group of items. The for attribute is necessary to bind our custom radio button with the input.

<form action="" method="post">
     <p>
      <input name="radio_btn" type="radio" id="test1" />
      <label for="test1">HTML5</label>
    </p>
    <p>
      <input name="radio_btn" type="radio" id="test2" />
      <label for="test2">CSS3</label>
    </p>
    <p>
      <input class="with-gap" name="radio_btn" type="radio" id="test3"  />
      <label for="test3">Material Design</label>
    </p>
    <p>
      <input name="radio_btn" type="radio" id="test4" disabled="disabled" />
      <label for="test4">Bootstrap 4</label>
    </p>
</form>
Output :
Checkboxes

Add the input's id as the value of the for attribute of the label.

<form action="" method="post">
<p>
  <input type="checkbox" id="test1" />
  <label for="test1">HTML5</label>
</p>
<p>
  <input type="checkbox" id="test2" checked="checked" />
  <label for="test2">CSS3</label>
</p>
<p>
  <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
  <label for="filled-in-box">Material Design</label>
</p>
<p>
  <input type="checkbox" id="indeterminate-checkbox" />
  <label for="indeterminate-checkbox">Bootstrap 3</label>
</p>
<p>
  <input type="checkbox" id="test3" checked="checked" disabled="disabled" />
  <label for="test3">Bootstrap 4</label>
</p>
<p>
  <input type="checkbox" id="test4" disabled="disabled" />
  <label for="test4">JavaScript</label>
</p>
</form>
Output :
Switches
<div class="switch">
    <label>
      Off
      <input type="checkbox" checked>
      <span class="lever"></span>
      On
    </label>
   </div>

   <!-- Disabled Switch -->
   <div class="switch">
    <label>
      Off
      <input disabled type="checkbox">
      <span class="lever"></span>
      On
    </label>
</div>
Output :
File Input

<form action="" method="post">
    <div class="file-field input-field">
      <div class="btn">
        <span>File</span>
        <input type="file">
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
</form>
Output :
Multiple File Uploads

Just add multiple class in your iput file to allow multiple file uploads.

<form action="" method="post">
    <div class="file-field input-field">
      <div class="btn">
        <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>
Output :
Range

Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.

<link rel="stylesheet" href="http://materializecss.com/extras/noUiSlider/nouislider.css" />
<!-- Start Range -->
<div id="test-slider"></div>
<!-- End Range -->
<script type="text/javascript" src="http://materializecss.com/extras/noUiSlider/nouislider.js"></script>
<script type="text/javascript">
    var slider = document.getElementById('test-slider');
      noUiSlider.create(slider, {
       start: [20, 80],
       connect: true,
       step: 1,
       orientation: 'horizontal', // 'horizontal' or 'vertical'
       range: {
         'min': 0,
         'max': 100
       },
       format: wNumb({
         decimals: 0
       })
     });
</script>
Output :
HTML5 Range

<p class="range-field">
   <input type="range" id="testing" min="0" max="100" />
</p>
Output :
Date Picker

Use pickadate.js to create a materialized date picker.

<form action="" method="post">

	<label for="birthdate">Date Of Birth</label>
	<input id="birthdate" type="text" class="datepicker">
    
</form>

<script type="text/javascript">
  $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year,
    today: 'Today',
    clear: 'Clear',
    close: 'Ok',
    closeOnSelect: false // Close upon selecting a date,
  });
</script>
Output :
Time Picker

Use pickadate.js working with our materialized time picker

<form action="" method="post">

	<label for="time">Current Time</label>
	<input id="time" type="text" class="timepicker">
    
</form>

<script type="text/javascript">
  $('.timepicker').pickatime({
    default: 'now', // Set default time: 'now', '1:30AM', '16:30'
    fromnow: 0,       // set default time to * milliseconds from now (using with default = 'now')
    twelvehour: false, // Use AM/PM or 24-hour format
    donetext: 'OK', // text for done-button
    cleartext: 'Clear', // text for clear-button
    canceltext: 'Cancel', // Text for cancel-button
    autoclose: false, // automatic close timepicker
    ampmclickable: true, // make AM PM clickable
    aftershow: function(){} //Function for after opening timepicker
  });
</script>
Output :
Character Counter

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

<form action="" method="post">
    <div class="row">
      <div class="input-field col s6">
        <input id="input_text" type="text" data-length="10">
        <label for="input_text">Input text</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <textarea id="textarea1" class="materialize-textarea" data-length="160"></textarea>
        <label for="textarea1">Textarea</label>
      </div>
    </div>
</form>

<script type="text/javascript">
  $(document).ready(function() {
    $('input#input_text, textarea#textarea1').characterCounter();
  });
</script>
Output :
Form Autocomplete

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

<form action="" method="post">
    <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>
</form>

<script type="text/javascript">
(function($){
  $(function(){
   $('input.autocomplete').autocomplete({
    data: {
      "HTML5": null,
      "CSS3": null,
      "Material Design": 'http://www.freetimelearning.com/materialize-css/images/materialize-left.jpg',
	  "Bootstrap 4": 'http://www.freetimelearning.com/images/home-icons/bootstrap.png',
	  "Free Time Learn": 'http://www.freetimelearning.com/materialize-css/images/free-time-learn-icon.png'
    },
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
    },
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
  });
}); 
})(jQuery);
</script>
Output :
  Prev Page
Next Page