Form Elements

Home
Form
Form 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.

Input Fields

View
Html

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-fielddiv 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 validand invalidclass 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:


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

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

First Name


  <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() {
    M.updateTextFields();
  });

Icon Prefixes

View
Html

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.


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

Custom Error or Success Messages

View
Html

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


  <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" data-error="wrong" data-success="right">Email</label>
          <span class="helper-text" data-error="wrong" data-success="right">Helper Text</span>
        </div>
      </div>
    </form>
  </div>

Textarea

View
Html
JS

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.


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

advanced note: When dynamically changing the value of a textarea with methods like jQuery's .val(),you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea.


              $('#textarea2').val('New Text');
              M.textareaAutoResize($('#textarea2'));

Icon Prefixes

View
Html

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.


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

Select

View
Html

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

Optgroups

Images in select

Browser Select


  <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="../../app-assets/images/avatar/avatar-7.png" class="circle">example 1</option>
      <option value="" data-icon="../../app-assets/images/avatar/avatar-5.png" class="circle">example 2</option>
      <option value="" data-icon="../../app-assets/images/avatar/avatar-3.png" class="circle">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="../../app-assets/images/avatar/avatar-7.png" class="left circle">example 1</option>
      <option value="" data-icon="../../app-assets/images/avatar/avatar-5.png" class="left circle">example 2</option>
      <option value="" data-icon="../../app-assets/images/avatar/avatar-3.png" 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>

Disabled Styles

View
Html

You can also add disabled to the select element to make the whole thing disabled. Or if you add disabled to the options, the individual options will be unselectable.

Materialize Disabled

Browser Disabled


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

Radio Buttons

View
Html

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. Add the input's idas the value of the forattribute of the label.

Add radio buttons to a group by adding the name attribute along with the same corresponding value for each of the radio buttons in the group. Create disabled radio buttons by adding the disabled attribute as shown below.

<form action="#"><p><label><input name="group1" type="radio" checked/><span>Radio-1</span></label></p><p><label><input name="group1" type="radio" /><span>Radio-2</span></label></p><p><label><input class="with-gap" name="group1" type="radio" /><span>Radio-3</span></label></p><p><label><input name="group1" type="radio" disabled="disabled" /><span>Diabled Radio</span></label></p></form>

Options

View
Html

To create a radio button with a gap,add class="with-gap"to your input. See the example below.

Radio-1

<p><label><input class="with-gap" name="group3" type="radio" checked /><span>Radio-1</span></label></p>

Checkboxes

View
Html

Use checkboxes when looking for yes or no answers. The forattribute 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.

Checkbox-1

Checkbox-2

Filled in

Indeterminate Style

Checkbox-3

Disabled Radio


  <form action="#">
    <p>
      <label>
        <input type="checkbox" />
        <span>Checkbox-1</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" checked="checked" />
        <span>Checkbox-2</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" class="filled-in" checked="checked" />
        <span>Filled in</span>
      </label>
    </p>
    <p>
      <label>
        <input id="indeterminate-checkbox" type="checkbox" />
        <span>Indeterminate Style</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" checked="checked" disabled="disabled" />
        <span>Checkbox-3</span>
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" disabled="disabled" />
        <span>Checkbox-4</span>
      </label>
    </p>
  </form>

Switches

View
Html

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 idas the value of the forattribute of the label.

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

File Input

View
Html

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

<form action="#"><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>

Multiple File Input

View
Html

You can also use the multipleattribute to allow multiple file uploads.

<form action="#"><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>

Range

View
Html
JS

Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. We have two different types of sliders. nouiSlider is a 3rd party plugin which we've modified. To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.

See noUiSlider's official documentation hereto see a variety of slider options

<div id="test-slider"></div>

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

HTML5 Range

View
Html

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

Date Picker

View
Html
JS

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

Birthdate

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

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

Time Picker

View
Html
JS

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

Lunch Time

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

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

Auto Complete

View
HTML
JS

Autocomplete

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

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

Character Counter

View
HTML
JS

<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="textarea1"class="materialize-textarea"data-length="120"></textarea><label for="textarea1">Textarea</label></div></div></form></div>

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

Elizabeth Elliott
- hello!
- How can we help? We're here for you!
- I am looking for the best admin template.?
- Materialize admin is the responsive materializecss admin template.
- 8:20 a.m.
- Ohh!very nice
- Thank you.
- How can I purchase it?
- 9:00 a.m.
- From ThemeForest.
- Only $24
- Ohh!Thank you.
- I will purchase it for sure.
- Great,Feel free to get in touch on
- https://pixinvent.ticksy.com/
Type here..

FILES

MEMBERS

PAGES

Form Elements

Input Fields

Prefilling Text Inputs

Icon Prefixes

Custom Error or Success Messages

Textarea

Icon Prefixes

Select

Disabled Styles

Radio Buttons

Options

Checkboxes

Switches

File Input

Multiple File Input

Range

noUiSlider

HTML5 Range

Date Picker

Time Picker

Auto Complete

Character Counter

Elizabeth Elliott

Mary Adams

Caleb Richards

Caleb Richards

June Lane

Edward Fletcher

Crystal Bates

Nathan Watts

Willard Wood

Ronnie Ellis

Daniel Russell

Sarah Graves

Andrew Hoffman

Camila Lynch