Character or word counters should be used if there is a character or word limit. They display the ratio of characters used and the total character limit.
Material Design guidelines: Text-fields - Assistive elements
Material Components for the web: Text Field
Bootstrap Maxlength: Official documentation
This plugin doesn’t require extra CSS loading but jQuery is required.
Demo
Helper message.
<div class="form-group form-ripple">
<label for="maxlength1">Username</label>
<input type="text" class="form-control" id="maxlength1" placeholder="Choose a username" maxlength="20">
<small class="form-text">Helper message.</small>
</div>
<div class="form-group mt-4">
<textarea class="form-control" id="maxlength2" placeholder="My limited textarea" maxlength="250"></textarea>
</div>Using Maxlength
Import Bootstrap Maxlength after your Material JavaScripts.
<script src="https://cdn.jsdelivr.net/npm/bootstrap-maxlength@1.10.0/dist/bootstrap-maxlength.min.js" integrity="sha256-3ZRODUzkt15hSZ9r++hfZQtVTmHkQJfyXxKhRz6FktQ=" crossorigin></script>Add a maxlength attribute to your input field.
<textarea class="form-control" id="textareaExample" placeholder="Try this textarea" maxlength="250"></textarea>Initialize plugin once. Here is an example of simplest declaration to be active on all inputs with maxlength attribute set and material design style.
$('[maxlength]').maxlength({
alwaysShow: true,
warningClass: 'form-text pr-3',
limitReachedClass: 'form-text pr-3',
placement: 'bottom-right-inside'
})All parameters are detailed in Bootstrap maxlength official documentation.
That’s it.