Font and theme export

Text Inputs

Collect text with floating labels, outlined fields, supporting text, and validation messages.

Basic example

Use a text field for short free-form input. Choose an underlined or outlined style and keep a visible label.

Supporting Text
place
gps_fixed
bubble_chart
error
Invalid characters! Please use 0-9 only. 
<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">
    <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" maxlength="20">
    <label for="inp-error">Failing Input</label>
    <span class="supporting-text">Invalid characters! Please use 0-9 only.</span>
  </div>
</form>

Setup

Start with the kmaterialize CSS and JavaScript from Getting started, then follow the component setup below.

Wrap the input and its label in .input-field; add .outlined for a full border. Match the label’s for to the input’s unique id. Load kmaterialize’s stylesheet and JavaScript once; text fields and floating labels are handled automatically.

import 'kmaterialize/dist/css/materialize.css';
import 'kmaterialize';

Floating labels

Since KmaterializeCSS 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. 

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

Examples and variants

Input Types

Alternate input types such as email are also supported. For password fields, see Password.

Supporting text for additional information 
<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>
</form>

Inline Inputs

Also Inline Inputs are supported.

This is an inline input field: 
<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>
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.

account_circle
phone 
<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.

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

Outlined fields on custom backgrounds

The outline leaves a real gap around the floating label. Your existing input markup works on solid colors and gradients without setting a label background.

<div class="input-field outlined">
  <input id="subject" type="text" placeholder=" " value="Your next great idea">
  <label for="subject">Email subject</label>
</div>

Copy button

Add a button with data-copy-target to copy an input's current value. The button appears only when included in your HTML. It supports keyboard activation, shows a checkmark on success, and reports clipboard failures. Clipboard access requires HTTPS or localhost.

<div class="input-field outlined">
  <input id="email_subject" type="text" placeholder=" " value="Welcome to the project">
  <label for="email_subject">Email subject</label>
  <button type="button" class="suffix input-copy-button"
          data-copy-target="#email_subject" aria-label="Copy email subject">
    <i class="material-icons" aria-hidden="true">content_copy</i>
  </button>
</div>

Load kmaterialize JavaScript to enable the action, including buttons inserted later. Use unique input IDs and type="button" to avoid submitting the form.

Character Counter

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="textarea-counter" class="materialize-textarea" maxlength="120" placeholder=" "></textarea>
        <label for="textarea-counter">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() {
    const elems = document.querySelectorAll('input#input_text, textarea#textarea-counter');
    const instances = CharacterCounter.init(elems);
  });

Need formatting, lists, and links? Try the Quill-based Textarea.

Textarea

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.

  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';
  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.

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

File Input

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

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

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

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

Number Input

For arrow controls with whole-number and decimal increments, see Number input.

NumberInput enhances a text input with IMask formatting - thousands separators, decimal scale, min/max. Deliberately opts in on type="text" data-type="number" rather than type="number", so IMask can format the display value.

IMask is an optional peer dependency, loaded on demand - install it yourself: npm install imask. 

<div class="input-field">
  <input id="number-input-example" type="text" data-type="number" step=".01" min="0" max="10000" placeholder=" ">
  <label for="number-input-example">Amount</label>
</div>

Validation

Use required, minlength, maxlength, type, and pattern on the control. Browsers normally prevent typing past maxlength; the over-limit previews below represent values loaded from saved data or rejected by your application. Check their length explicitly when validating programmatically assigned values.

These previews keep their error state visible. In your form, show errors after checking a field or submitting, then clear them when the value is valid.

For text fields, use .input-field.error, aria-invalid="true", and a message linked with aria-describedby. Remove the error state when resolved. Use aria-live="polite" for messages updated dynamically.

Required
Enter your first name.
Maximum length
Use 20 characters or fewer.
Email format
Enter an email address such as name@example.com.
URL format
Enter a complete URL, such as https://example.com.
Pattern
Use exactly six digits.
Textarea length
Keep your summary to 40 characters or fewer. 
<div class="input-field outlined error">
    <i class="material-icons suffix" aria-hidden="true">error</i>
    <input id="validation-name" type="text" required placeholder=" " value="" aria-invalid="true" aria-describedby="validation-name-error">
    <label for="validation-name">First name</label>
    <span id="validation-name-error" class="supporting-text">Enter your first name.</span>
</div>

<div class="input-field error">
    <i class="material-icons suffix" aria-hidden="true">error</i>
    <input id="validation-display-name" type="text" maxlength="20" placeholder=" " value="Alexandra Montgomery-Smith" aria-invalid="true" aria-describedby="validation-display-name-error">
    <label for="validation-display-name">Display name</label>
    <span id="validation-display-name-error" class="supporting-text">Use 20 characters or fewer.</span>
</div>

<div class="input-field outlined error">
    <i class="material-icons suffix" aria-hidden="true">error</i>
    <input id="validation-email" type="email" required placeholder=" " value="alex@" aria-invalid="true" aria-describedby="validation-email-error">
    <label for="validation-email">Email address</label>
    <span id="validation-email-error" class="supporting-text">Enter an email address such as name@example.com.</span>
</div>

<div class="input-field outlined error">
    <i class="material-icons suffix" aria-hidden="true">error</i>
    <input id="validation-url" type="url" placeholder=" " value="example" aria-invalid="true" aria-describedby="validation-url-error">
    <label for="validation-url">Website</label>
    <span id="validation-url-error" class="supporting-text">Enter a complete URL, such as https://example.com.</span>
</div>

<div class="input-field error">
    <i class="material-icons suffix" aria-hidden="true">error</i>
    <input id="validation-reference" type="tel" pattern="[0-9]{6}" inputmode="numeric" placeholder=" " value="12A" aria-invalid="true" aria-describedby="validation-reference-error">
    <label for="validation-reference">Reference</label>
    <span id="validation-reference-error" class="supporting-text">Use exactly six digits.</span>
</div>

<div class="input-field outlined error">
    <textarea id="validation-summary" class="materialize-textarea" maxlength="40" placeholder=" " aria-invalid="true" aria-describedby="validation-summary-error">A project summary that is longer than the forty-character limit.</textarea>
    <label for="validation-summary">Summary</label>
    <span id="validation-summary-error" class="supporting-text"><i class="material-icons" aria-hidden="true">error</i> Keep your summary to 40 characters or fewer.</span>
</div>

Native validation states

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.

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.

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

Reference

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

Formatted number setup

Initialization

  document.addEventListener('DOMContentLoaded', function() {
    const elems = document.querySelectorAll('input[data-type="number"]');
    const instances = NumberInput.init(elems, {
      thousandsSeparator: ' ',
      radix: '.',
    });
  });
Options
Name Type Default Description
thousandsSeparator String ' ' Character used to group thousands.
radix String '.' Decimal separator.
min / max Number from min/max attrs Bounds on the value.
scale Number derived from step's decimals Number of decimal places allowed.

Related input guides

Password fields, the show/hide toggle, and its API are documented on the Password page.

For numeric steppers, see Number input. For formatted phone numbers, currency, dates, and codes, see Input Masks. Use Textarea for rich text and File Upload for drag-and-drop attachments.