Components menu
Character count
A live count of the remaining permitted characters in an input field so that the user knows how much they can type.
About this component
A character count is an enhancement to standard text input and textarea components.
Why we use this component
If a form field only allows a certain number of characters to be entered, it is helpful to let the user know how many remaining characters they are allowed.
HTML
<form>
<div class="form-group mb-3 mt-3">
<label class="form-label" for="first-name"> First name </label>
<input type="text" maxlength="20" name="name" id="first-name" value="" class="form-control">
<p class="form-hint--text">
You can enter up to 20 characters.
<span class="character-count--remaining" id="remaining"></span>
<span class="character-count--entered" id="entered"></span>
</p>
</div>
</form>
<script type="text/javascript">
$(function(){
var maxlength = 20;
$("#first-name").keyup(function(){
var currentlength = $(this).val().length;
var remaining = maxlength-currentlength;
$("#entered").html(currentlength+" entered");
$("#remaining").html(remaining+" remaining");
});
});
</script>
CSS
/* Character count
------------------------------------ */
.character-count--entered {
float: right;
color: var(--scottish-dark-teal);
margin-right: 10px;
}
.character-count--remaining {
float: right;
color: var(--scottish-dark-teal);
}