Materialize CSS Forms

Materialize CSS forms are used to receive user inputted data & it has the following types of form elements: Input fields, radio buttons, checkboxes, select, range, pickers, etc.

Input Fields

Input fields allow the user to input.To create input field, wrap input and label inside the container and assign it to .input-field class.

Input Fields Example
This is an inline input field:
Helper text

General Syntax

    <div class="input-field">
  <input name="name" id="id" type="text" />
  <label for=""></label>
</div>
     
Try It Now

Source Code

     
      <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_inline" type="email" class="validate">
            <label for="email_inline">Email</label>
            <span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
          </div>
        </div>
      </div>
    </form>
  </div>     
    
Try it yourself

Textarea

Textarea is used for larger user input. To create Materialize textarea, follow the given below steps.

  • Place the input & label inside the external container and assign the .input-field class.
  • Assign the .materialize-textarea class to the textarea base class.
Textarea

General Syntax

    <div class="input-field">
  <textarea id="textarea" class="materialize-textarea"> </textarea>
  <label for="textarea">Textarea</label>
</div>
     
Try It Now

Source Code

     
      <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>     
    
Try it yourself

Note: When textarea value is dynamically changing like jQuery's .val() then in this case you must have to trigger an auto resize on it afterwords.

Initialization
   	         
    $('#textarea').val('New Text');
    $('#textarea').trigger('autoresize');
   

Select Forms

Select form allows user to select one option, multiple option or optgroup from the given list of options.

Select Input

Basic steps to create Materialize CSS select forms.

  • Place the select form inside the external container and assign the .input-field class.
  • Now, initialize the materialize select either Javascript or jQuery.
Initialization
   	         
 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });
  // Or with jQuery
  $(document).ready(function(){
    $('select').formSelect();
  });
   

General Syntax

    <select name="" id="">
    <option value="">value</option>
 </select>
     
Try It Now

Source Code

     
      <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>
      <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="images/sample-1.jpg">example 1</option>
      <option value="" data-icon="images/office.jpg">example 2</option>
      <option value="" data-icon="images/yuna.jpg">example 3</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="images/sample-1.jpg" class="left">example 1</option>
      <option value="" data-icon="images/office.jpg" class="left">example 2</option>
      <option value="" data-icon="images/yuna.jpg" class="left">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>     
    
Try it yourself

Radio Button

Radio buttons are used to select only one option from the group of items.Make sure that, the for attribute value of the label is same as the input id value.

Radio Button

General Syntax

    <label>
  <input name="inputname" type="radio" id="inputid">
  <span for="inputid">Input Text</span>
</label>
     
Try It Now

Source Code

     
      <form action="#">
  <p>
    <label>
      <input name="group1" type="radio" id="webdesign" checked>
      <span for="webdesign">Web Design</span>
    </label>
  </p>
  <p>
    <label>
      <input name="group1" type="radio" id="webdesign">
      <span for="webdesign">Graphics Design</span>
    </label>
  </p>
  <p>
    <label>
      <input class="with-gap" name="group1" type="radio" id="appdesign">
      <span for="appdesign">App design</span>
    </label>
  </p>
</form>     
    
Try it yourself

Checkbox

Checkbox is used to select either yes or no answers. keep in mind that the for attribute of label is necessary to bind custom checkbox with the input.

Make sure that label, for attribute value will be same as the id attribute value of the checkbox.

Checkbox

General Syntax

    <label for="checkboxid">
  <input type="checkbox"  id="checkboxid">
  <span>Checkbox Text</span>
</label>
     
Try It Now

Source Code

     
      <form action="#">
    <p>
      <label for="php">
        <input type="checkbox"  id="php">
        <span>PHP</span>
      </label>
    </p>
    <p>
      <label for="asp">
        <input type="checkbox" checked="checked" id="asp" />
        <span>ASP</span>
      </label>
    </p>
    <p>
      <label for="rubby">
        <input type="checkbox" class="filled-in" checked="checked" id="rubby">
        <span>Ruby</span>
      </label>
    </p>
    <p>
      <label for="bootstrap5">
        <input id="indeterminate-checkbox" type="checkbox" id="bootstrap5">
        <span>Bootstrap 5 </span>
      </label>
    </p>
    <p>
      <label for="materialize">
        <input type="checkbox" checked="checked" disabled="disabled" id="materialize">
        <span>Materialize</span>
      </label>
    </p>
    <p>
      <label for="tailwind">
        <input type="checkbox" disabled="disabled" id="tailwind">
        <span>Tailwind</span>
      </label>
    </p>
  </form>     
    
Try it yourself

Switches

Switches are basically special checkboxes that are used for binary states such as on / off.

Source Code

     
      <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>     
    
Try it yourself

File Input

If you want to take input as a path then use input of type file.

File

Source Code

     
      <form action="" method="post">
    <div class="file-field input-field">
      <div class="btn" style="padding-top:0px;">
        <span>File</span>
        <input type="file">
      </div>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text">
      </div>
    </div>
</form>     
    
Try it yourself

Multiple File Uploads

To create multiple file upload, simply add .multiple class in your input file to allow multiple file uploads.

Multiple File Upload
File

Source Code

     
      <form action="" method="post">
    <div class="file-field input-field">
      <div class="btn" style="padding-top:0px;">
        <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>     
    
Try it yourself

Range

Range slider is used for the value with a wide range.There are mainly two types of range slider such as HTML 5 & nouiSlider.

nouiSlider

It is a a 3rd party plugin which will be modified.To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.

Source Code

     
      <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
       }
     });
</script>     
    

HTML5 Range

Source Code

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

Date Picker

The datepicker is used to select a date from the calendar.

Initialization
   	         
 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.datepicker');
    var instances = M.Datepicker.init(elems, options);
  });
// Or with jQuery
 $(document).ready(function(){
    $('.datepicker').datepicker();
  });
   

Source Code

     
      <div class="input-field">
      <input id="birthdate" type="text" class="datepicker">
      <label for="birthdate">Date Picker</label>
 </div>     
    
Try it yourself

Time Picker

The time picker allows users to select time from the clock.

Source Code

     
      <div class="input-field">
   <input id="lunchtime" type="text" class="timepicker">
   <label for="lunchtime">Time Picker</label>
</div>     
    
Try it yourself

Form Autocomplete

Autocomplete feature is used to suggest the possible value in the form.You can also populate the suggestion list dynamically.

textsms
Initialization
   	         
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, options);
  });
  // Or with jQuery
$(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });
   

Source Code

     
      <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>     
    
Try it yourself

Character Counter

It applies the restriction on input character length. To create a character counter, add data-length property in the input fields and then initializes it through jQuery. Basically, it is mainly used where the input character length is mandatory.

Input Character Counter

Initialization

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

Source Code

     
      <div class="row">
  <form class="col s12">
    <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="textarea2" class="materialize-textarea" data-length="120"></textarea>
        <label for="textarea2">Textarea</label>
      </div>
    </div>
  </form>
</div>     
    
Try it yourself

Icon Prefixes

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

Icon Prefixes
account_circle
phone

Source Code

     
      <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>     
    
Try it yourself

Custom Error or Success Messages

Custom validation messages can be express by adding either data-error or data-success attributes to your helper text element.

Icon Prefixes
Helper text

Source Code

     
      <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
          <span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
        </div>
      </div>
    </form>
  </div>     
    
Try it yourself

Conclusion

Materialize forms are the standard way to take user inputted data. There are different predefined Materialize CSS form input classes that are used with the HTML form's input field such as Input fields, radio buttons, checkboxes, selects, range, pickers to make more elegant input fields. You can also add icon prefixes with the form inputs of Materialize.

Web Tutorials

Materialize CSS Forms
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS