<div class="md-form">
    <input type="text" id="input-example" class="form-control invalid" placeholder="Placeholder" value="Test data">
    <label for="input-example" data-error="Error">Title</label>

Input Error

Based on the version from MDB:


No additional actions, aside from the markup, are needed to use this component.


  • MDB framework defines that the input element comes prior to the label element
  • It’s best practice to have an input element accompanied with a label element which are connected via the for attribute on the label element and the corresponding id on the input element
  • The error state is defined by
    • the invalid class on the input element
    • the data-error attribute on the label element where it’s contents is shown underneath the input element