Materialize CSS Forms: Inputs, Select and Validation

Quick answer: A Materialize form field is an input wrapped in a div.input-field with a label after it — the label animates into the field on focus. Add class="validate" to trigger inline validation with the invalid and valid helper classes. select and textarea work inside the same wrapper but are not initialized automatically on 1.0.0 — you must call M.FormSelect.init() for selects and M.CharacterCounter.init() for counters. The single most common mistake is forgetting the input-field wrapper, which removes all styling and animation.

A complete form in one block

Text input, select, textarea and a submit button — the shapes used in almost every real form, on Materialize 1.0.0.

<form class="col s12">
  <div class="row">
    <!-- Text input -->
    <div class="input-field col s6">
      <input id="email" type="email" class="validate" required>
      <label for="email">Email</label>
    </div>

    <!-- Select -->
    <div class="input-field col s6">
      <select id="plan">
        <option value="" disabled selected>Choose a plan</option>
        <option value="basic">Basic</option>
        <option value="pro">Pro</option>
      </select>
      <label>Plan</label>
    </div>

    <!-- Textarea with counter -->
    <div class="input-field col s12">
      <textarea id="bio" class="materialize-textarea" data-length="120"></textarea>
      <label for="bio">Short bio</label>
    </div>

    <button class="btn waves-effect waves-light" type="submit">Save</button>
  </div>
</form>

document.addEventListener('DOMContentLoaded', function () {
  M.AutoInit(); // initializes select, textarea counter and more
});

If you prefer explicit control, swap M.AutoInit() for M.FormSelect.init(document.querySelectorAll('select')) and M.CharacterCounter.init(document.querySelectorAll('[data-length]')). Selects must be initialized or they render as the browser’s default control with none of the Materialize styling.

Validation classes and options

Piece	Where	Effect
validate	on the input	Adds built-in validation for email, url, number and required
helper-text	span under the label	Message shown when validation runs
invalid	added automatically	Red state applied by Materialize on failure
valid	added automatically	Green state applied on success
data-error / data-success	on the input	Custom text for the helper message
materialize-textarea	on the textarea	Enables auto-growing height and counter

<div class="input-field col s12">
  <input id="email" type="email" class="validate"
         data-error="Enter a valid email" data-success="Looks good">
  <label for="email">Email</label>
  <span class="helper-text">We never share your address.</span>
</div>

This is HTML5 validation surfaced through Materialize’s styling — it catches format mistakes in the browser before any server round-trip. For a ready-made login and signup layout built from these pieces, see the login and register forms post.

Switches, checkboxes and radios

These three share one pattern: a real input, a styled span or label, and no JavaScript. Put switch on the label to turn a checkbox into a toggle.

<!-- Switch -->
<div class="switch">
  <label>
    Off
    <input type="checkbox" checked>
    <span class="lever"></span>
    On
  </label>
</div>

<!-- Checkbox -->
<p>
  <label>
    <input type="checkbox" class="filled-in" checked />
    <span>Subscribe</span>
  </label>
</p>

Styling the submit button, including icons and color variants, is covered in the button guide, and the shade names for colored states come from the colors reference.

Two more field types round out the set. A file input uses the same input-field wrapper with type="file" and renders a styled choose-file button. Date and time pickers are separate components: add a class of datepicker or timepicker to the input and initialize them with M.Datepicker.init() and M.Timepicker.init(), both of which M.AutoInit() also covers. Because a picker binds to one specific input, that is the one place where explicit per-element initialization is usually clearer than a global auto-init.

When the form looks wrong: four checks

• Missing input-field wrapper. The div.input-field is what draws the underline and animates the label. Without it the field falls back to the browser default.
• Uninitialized select. A styled select needs M.FormSelect.init(); plain markup is not enough.
• Label after input, not before. Materialize relies on the label following the input in source order to measure and float it. Reversing them breaks the animation.
• Counter not showing. A data-length textarea also needs the materialize-textarea class and CharacterCounter init.

All of these assume a clean 1.0.0 setup; if your page loads 0.97.x JavaScript, the component APIs differ entirely. The Materialize CSS tutorial covers version pinning and the CDN imports to match.

Building a checkout or onboarding form and want it reviewed field by field? Ampersand Academy teaches front-end form work one-to-one, using your own project as the curriculum.

Frequently asked questions