Skip to main content

Character count

Character count helps users know how much text they can enter when there is a limit on the number of characters.

This is an input with a character counter.
15 characters allowed
Example HTML usage: 
<!-- Text input  -->
<div class="form-group">
  <label for="textinput">Text input</label>
  <div class="form-hint">This is an input with a character counter.</div>
  <input type="text" class="form-control" id="textinput" />
  <small class="help-text">
    <span id="charNum" data-value="15">15</span>
    <span id="charTxt">characters allowed</span></small
  >
</div>
This is a textarea with a character counter.
50 characters allowed
Example HTML usage: 
<!-- Textarea   -->
<div class="form-group">
  <label for="textareainput">Textarea</label>
  <div class="form-hint">This is a textarea with a character counter.</div>

  <textarea class="form-control" id="textareainput" rows="2"></textarea>
  <small class="help-text">
    <span id="charNum" data-value="50">50</span>
    <span id="charTxt">characters allowed</span></small
  >
</div>