GOVUK Character count

An example of the govuk character count component.

Open example in new window
HTML 




<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="200">



<div class="govuk-form-group">
  <label class="govuk-label" for="with-hint">
  Can you provide more detail?
</label>



  <div id="with-hint-hint" class="govuk-hint">
  Do not include personal or financial information like your National Insurance number or credit card details.
</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>
Jinja 
{% from "govuk_frontend_jinja/components/character-count/macro.html" import govukCharacterCount -%}
{{ govukCharacterCount({
    "name": "with-hint",
    "id": "with-hint",
    "maxlength": 200,
    "label": {
      "text": "Can you provide more detail?"
    },
    "hint": {
      "text": "Do not include personal or financial information like your National Insurance number or credit card details."
    }
}) }}