The LB Redbridge design system.

Character count

Character count to help users know how much text they can enter when there is a limit on the number of characters.
GDS guidelines on using this component (opens in a new window)


Character count [hint text]
You can enter up to 200 characters


HTML Code ↕  

                    
                      
<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="200">
<div class="govuk-form-group">
    <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="with-hint">
        Character count for textarea label
    </label>
    </h1>
    <div id="with-hint-hint" class="govuk-hint">
    Character count hint text
    </div>
    <textarea class="govuk-textarea govuk-js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
</div>
<div id="with-hint-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 200 characters
</div>
</div>