Text Inputs

Forms are the standard way to receive data from the user. 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 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.



<form class="row" style="gap: 1em;">
  <div class="s12 m6 input-field">
    <input id="first_name" type="text" placeholder=" " maxlength="20">
    <label for="first_name">First Name</label>
    <span class="supporting-text">Supporting Text</span>
  </div>

  <div class="s12 m6 input-field outlined">
    <input id="last_name" type="text" placeholder=" " maxlength="20">
    <label for="last_name">Last Name</label>
    <!--<span class="supporting-text">Supporting Text</span>-->
  </div>

  <div class="s12 m6 input-field">
    <input id="disabled" type="text" placeholder=" " value="I am not editable" disabled>
    <label for="disabled">Disabled</label>
  </div>

  <div class="s12 m6 input-field outlined">
    <input id="disabled" type="text" placeholder=" " value="Not editable too" disabled>
    <label for="disabled">Disabled</label>
  </div>

  <div class="s12 m6 input-field">
    <div class="prefix"><i class="material-icons">place</i></div>
    <div class="suffix"><i class="material-icons">gps_fixed</i></div>
    <input id="inp-location" type="text" placeholder=" " value="Planet Earth">
    <label for="inp-location">Location</label>
  </div>

  <div class="s12 m6 input-field outlined error" maxlength="20">
    <div class="prefix"><i class="material-icons">bubble_chart</i></div>
    <div class="suffix"><i class="material-icons">error</i></div>
    <input id="inp-error" type="text" placeholder=" " value="$%/'#sdf">
    <label for="inp-error">Failing Input</label>
    <span class="supporting-text">Invalid characters! Please use 0-9 only.</span>
  </div>
</form>

Input Types

Alternate Input Types such as email and password are also supported.



<form class="row" style="gap: 1em;">
  <div class="s12 m6 input-field">
    <input id="email" type="email" class="validate" placeholder=" ">
    <label for="email">Email</label>
    <span class="supporting-text" data-error="wrong" data-success="right">Supporting text for additional information</span>
  </div>
  <div class="s12 m6 input-field">
    <input id="password" type="password" class="validate" placeholder=" " maxlength="20">
    <label for="password">Password</label>
  </div>
</form>

Inline Inputs

Also Inline Inputs are supported.



<form class="row">
  <div class="s12">
    This is an inline input field:
    <div class="input-field inline">
      <input id="email_inline" type="email" class="validate" placeholder=" ">
      <label for="email_inline">Email</label>
      <span class="helper-text" data-error="wrong" data-success="right"></span>
    </div>
  </div>
</form>

Floating Labels

Since MaterializeCSS v2, floating Labels are rendered with CSS only by default. However, it is required to use a placeholder with a single white space (" ") in the HTML (providing an empty string will not work!).

Important: If you provide a value different than a single white space, the CSS rules will treat it as a "important" placeholder value and will always render the labels in "active" state.

First Name

Last Name



<div class="row">
  <div class="col s12 m6">
    <div class="input-field outlined" style="margin: 0 4px;">
      <input id="first_name2" type="text" class="validate" placeholder=" ">
      <label class="active" for="first_name2">First Name</label>
    </div>
  </div>
  <div class="col s12 m6">
    <div class="input-field outlined" style="margin: 0 4px;">
      <input id="last_name2" type="text" class="validate" placeholder="Doe...">
      <label class="active" for="last_name2">Last Name</label>
    </div>
  </div>
</div>

Icon Prefixes

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>

Icon Suffixes

You can also add an icon suffix. Just add an icon with the class suffix 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 suffix">account_circle</i>
        <input id="icon_suffix" type="text" class="validate">
        <label for="icon_suffix">First Name</label>
      </div>
      <div class="input-field col s6">
        <i class="material-icons suffix">phone</i>
        <input id="icon_telephone_suffix" type="tel" class="validate">
        <label for="icon_telephone_suffix">Telephone</label>
      </div>
    </div>
  </form>
</div>

Custom Error or Success Messages

You can add custom validation messages by adding either data-error or data-success attributes to your helper text element.



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

Changing colors

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 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="textarea1" class="materialize-textarea" placeholder=" "></textarea>
        <label for="textarea1">Textarea</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <textarea id="textarea2" class="materialize-textarea" placeholder="A custom placeholder :)"></textarea>
        <label for="textarea2">Textarea with placeholder</label>
      </div>
    </div>
  </form>
</div>

Advanced notes:

If you are adding Textarea form elements dynamically, you can use this to initialize them.

  M.Forms.InitTextarea(document.querySelector('#textarea1'));

When dynamically changing the value of a textarea like setting HTMLElement#value attribute, you must trigger an autoresize on it afterwords because simply updating the element's value does not automatically trigger the events we've binded to the textarea.


  document.querySelector("#textarea1").value = 'New Text';
  M.Forms.textareaAutoResize(document.querySelector('#textarea1'));

Icon Prefixes

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>

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>

You can also use the multiple attribute 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>

Advanced note:

If you are adding File Input form elements dynamically, you can use this to initialize them.

  M.Forms.InitFileInputPath(document.querySelector('#fileinput1'));

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

Important: The "data-length" attribute has been depracated in favour of "maxlength" in v2.x.



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

Initialization

There are no options for this plugin, but if you are adding these dynamically, you can use this to initialize them.


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('input#input_text, textarea#textarea2');
    var instances = M.CharacterCounter.init(elems);
  });

Materialize is a modern responsive CSS framework based on Material Design by Google.

Input fields

Input Types

Inline Inputs

Floating Labels

Icon Prefixes

Icon Suffixes

Custom Error or Success Messages

Changing colors

Textarea

Icon Prefixes

File Input

Character Counter

Initialization

Color Scheme

Text Inputs

Materialize is a modern responsive CSS framework based on Material Design by Google.

Input fields

Input Types

Inline Inputs

Floating Labels

Icon Prefixes

Icon Suffixes

Custom Error or Success Messages

Changing colors

Textarea

Icon Prefixes

File Input

Character Counter

Initialization