Default usage
Use maxlength(); to enable maxlength.
<input type="text" class="form-control basic" maxlength="25" name="defaultconfig" id="defaultconfig">Change the threshold value
Use threshold option to show up when there are 20 chars or less
<input type="text" class="form-control threshold" maxlength="25" name="moreoptions" id="moreoptions" />Few options
Use warningClass option to change default badge color and limitReachedClass option to change the badge after limit reached.
<input type="text" class="form-control few-options" maxlength="25" name="alloptions" id="alloptions1" />All the options
Use preText option to prepend text, postText option to postpend text and separator option to add a seperator in between max and min length .
<input type="text" class="form-control alloptions" maxlength="25" name="alloptions" id="alloptions2" />What about textareas?
<textarea id="textarea" class="form-control textarea" maxlength="225" rows="2" placeholder="This textarea has a limit of 225 chars."></textarea>Positions
Top Left
Use placement: top-left to align badge at the top left corner.
<input type="text" class="form-control placement-top-left" maxlength="25" name="placement" id="placement1" />Top
Use placement: top to align badge at the top.
<input type="text" class="form-control placement-top" maxlength="25" name="placement" id="placement2" />Top Right
Use placement: top-right to align badge at the top right corner.
<input type="text" class="form-control placement-top-right" maxlength="25" name="placement" id="placement3" />Vertically Center Left
Use placement: left to align badge at the left corner.
<input type="text" class="form-control placement-left" maxlength="25" name="placement" id="placement4" />Vertically Center Right
Use placement: right to align badge at the right corner.
<input type="text" class="form-control placement-right" maxlength="25" name="placement" id="placement5" />Bottom Left
Use placement: bottom-left to align badge at the bottom left corner.
<input type="text" class="form-control placement-bottom-left" maxlength="25" name="placement" id="placement6" />Bottom Right
Use placement: bottom-right to align badge at the bottom right corner.
<input type="text" class="form-control placement-bottom-right" maxlength="25" name="placement" id="placement7" />Bottom
Use placement: bottom to align badge at the bottom corner.
<input type="text" class="form-control placement-bottom" maxlength="25" name="placement" id="placement8" />Copyright © 2026 DesignReset, All rights reserved.
Coded with
