Input Fields

<div class="row">
    <form class="col-md-12">
      <div class="row">
        <div class="input-field col-md-6">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name">First Name</label>
        </div>
        <div class="input-field col-md-6">
          <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-md-12">
          <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-md-12">
          <input id="password" type="password" class="validate">
          <label for="password">Password</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col-md-12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
      </div>
    </form>
  </div>

Prefilling Text Inputs

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

Icon Prefixes

<div class="row">
    <form class="col-md-12">
      <div class="row">
        <div class="input-field col-md-6">
          <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-md-6">
          <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>

Custom Error or Success Messages

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

Changing colors

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

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

Radio Buttons Premium component

<form action="#">
    <p>
      <input name="group1" type="radio" id="test1" />
      <label for="test1">Red</label>
    </p>
    <p>
      <input name="group1" type="radio" id="test2" />
      <label for="test2">Yellow</label>
    </p>
      <p>
        <input name="group1" type="radio" id="test4" disabled="disabled" />
        <label for="test4">Brown</label>
    </p>
  </form>

Gap Premium component

Red

<p>
    <input class="with-gap" name="group3" type="radio" id="test5" checked />
    <label for="test5">Red</label>
  </p>

Checkboxes Premium component

<form action="#">
    <p>
      <input type="checkbox" id="test6" checked="checked" />
      <label for="test6">Basic</label>
    </p>
    <p>
      <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
      <label for="filled-in-box">Filled in</label>
    </p>
    <p>
      <input type="checkbox" id="test7" checked="checked" disabled="disabled" />
      <label for="test7">Basic disabled</label>
    </p>
      <p>
        <input type="checkbox" id="test8" disabled="disabled" />
        <label for="test8">Filled in disabled</label>
    </p>
  </form>

Switches Premium component

<!-- Switch -->
  <div class="switch">
    <label>
      Off
      <input type="checkbox">
      <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>

 <form action="#">
    <div class="file-field input-field">
      <button type="button" class="btn btn-default waves-effect waves-light">
        <span>File</span>
        <input type="file" />
      </button>  
    </div>
  </form>

Select Premium component

<div class="row">
            <div class="col-md-5">
                <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>
            </div>
        </div> 

Initialization

Before using Select, you have to initialize it in your project by using code below.

Default select

 <div class="row">
            <div class="col-md-5">
                <label>Default 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>
            </div>
        </div>

Initialization

Default Select doesn't requrie initialization

Range Premium component

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

Date Picker Premium component

Click on the line below

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

Initialization

Before using Data Picker, you have to initialize it using code below.

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

Time Picker Premium component

Light Version

Click on the line below

<input id="input_starttime" class="timepicker" type="text">

Dark Version

Click on the line below

<input id="input_endtime" class="timepicker" type="text">

Initialization

Initialize time picker with the code below

    <script type="text/javascript">
    $('#input_starttime').pickatime({
      twelvehour: true
    });
    $('#input_endtime').pickatime({
      darktheme: true,
      twelvehour: false
    });
    $('.datepicker').pickadate();
  </script>
  

Character Counter Premium component

<div class="row">
      <form class="col-md-12">
        <div class="row">
          <div class="input-field col-md-6">
            <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-md-12">
            <textarea id="textarea1" class="materialize-textarea" length="120"></textarea>
            <label for="textarea1">Textarea</label>
          </div>
        </div>
      </form>
    </div>

Initialization

Before using Character Counter, you have to initialize it in your project by using code below.

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

Google Maps

Step 1. Place a following .div in your project. Adjust a div hight to your needs.

        <div id="map-container" class="card-panel hoverable wow fadeInUp" style="height: 300px"></div>
        

Step 2. Include a javascript code in script section. Adjust a localization and zoom.

To get a Google Maps position go to Google Maps -> choose your localization -> right click -> "what's here?"

        <!--Google Maps-->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
    function init_map() {
        var var_location = new google.maps.LatLng(40.725118, -73.997699);

        var var_mapoptions = {
            center: var_location,
            zoom: 14
        };

        var var_marker = new google.maps.Marker({
            position: var_location,
            map: var_map,
            title: "New York"
        });

        var var_map = new google.maps.Map(document.getElementById("map-container"),
            var_mapoptions);

        var_marker.setMap(var_map);

    }

    google.maps.event.addDomListener(window, 'load', init_map);
</script>