Bootstrap-Maxlength uses a Twitter Bootstrap label to show a visual feedback to the user about the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.

Bootstrap MaxLength - Demo

Default usage

The badge will show up by default when the remaining chars are 10 or less:


Change the threshold value

Do you want the badge to show up when there are 20 chars or less? Use the threshold option:

            threshold: 20

Few options

            alwaysShow: true,
            threshold: 10,
            warningClass: "label label-success",
            limitReachedClass: "label label-danger"

All the options

This is a complete example where all the options configured for the bootstrap-maxlength counter are setted.

Please note: if the alwaysShow option is enabled, the threshold option is ignored.

          alwaysShow: true,
          threshold: 10,
          warningClass: "label label-success",
          limitReachedClass: "label label-danger",
          separator: ' of ',
          preText: 'You have ',
          postText: ' chars remaining.',
          validate: true

What about textareas?

Bootstrap maxlength supports textarea as well as inputs. Even on old IE.

            alwaysShow: true

Let's play with the position

The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left, bottom-left and centered-right.
All you need to do is specify the placement option, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'.

            alwaysShow: true,
            placement: 'top-left'










Fork me on GitHub