This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

Character count

Character count 📸

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-info"></textarea>
  <div id="more-detail-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 10 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  name: "more-detail",
  maxlength: 10,
  label: {
    text: "Can you provide more detail?"
  }
}) }}

Character count with hint

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <label class="govuk-label" for="with-hint">
    Can you provide more detail?
  </label>
  <div id="with-hint-hint" class="govuk-hint">
    Don&#39;t include personal or financial information, eg 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 id="with-hint-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 10 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  name: "with-hint",
  id: "with-hint",
  maxlength: 10,
  label: {
    text: "Can you provide more detail?"
  },
  hint: {
    text: "Don't include personal or financial information, eg your National Insurance number or credit card details."
  }
}) }}

Character count with hint and error

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-form-group--error govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <label class="govuk-label" for="with-error">
    Can you provide more detail?
  </label>
  <div id="with-error-hint" class="govuk-hint">
    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
  </div>
  <p id="with-error-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Please provide more detail
  </p>
  <textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count" id="with-error" name="with-error" rows="5" aria-describedby="with-error-info with-error-hint with-error-error"></textarea>
  <div id="with-error-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 10 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  name: "with-error",
  id: "with-error",
  maxlength: 10,
  label: {
    text: "Can you provide more detail?"
  },
  errorMessage: {
    text: "Please provide more detail"
  },
  hint: {
    text: "Don't include personal or financial information, eg your National Insurance number or credit card details."
  }
}) }}

Character count with default value

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <label class="govuk-label" for="with-default-value">
    Full address
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="with-default-value" name="default-value" rows="5" aria-describedby="with-default-value-info">221B Baker Street
London
NW1 6XE
</textarea>
  <div id="with-default-value-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 100 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-default-value",
  name: "default-value",
  maxlength: 100,
  label: {
    text: "Full address"
  },
  value: "221B Baker Street\nLondon\nNW1 6XE\n"
}) }}

Character count with default value exceeding limit

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-form-group--error govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <label class="govuk-label" for="exceeding-characters">
    Full address
  </label>
  <p id="exceeding-characters-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Please do not exceed the maximum allowed limit
  </p>
  <textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count" id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-info exceeding-characters-error">221B Baker Street
London
NW1 6XE
</textarea>
  <div id="exceeding-characters-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 10 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "exceeding-characters",
  name: "exceeding",
  maxlength: 10,
  value: "221B Baker Street\nLondon\nNW1 6XE\n",
  label: {
    text: "Full address"
  },
  errorMessage: {
    text: "Please do not exceed the maximum allowed limit"
  }
}) }}

Character count with custom rows

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <label class="govuk-label" for="custom-rows">
    Full address
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="custom-rows" name="custom" rows="8" aria-describedby="custom-rows-info"></textarea>
  <div id="custom-rows-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 10 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "custom-rows",
  name: "custom",
  maxlength: 10,
  label: {
    text: "Full address"
  },
  rows: 8
}) }}

Character count with label as page heading

Open this example in a new tab

Code

Markup

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

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "textarea-with-page-heading",
  name: "address",
  maxlength: 10,
  label: {
    text: "Full address",
    classes: "govuk-label--l",
    isPageHeading: true
  }
}) }}

Character count with maxwords

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxwords="10" data-count-type="words">
  <label class="govuk-label" for="maxwords">
    Full address
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="maxwords" name="maxwords" rows="5" aria-describedby="maxwords-info"></textarea>
  <div id="maxwords-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 10 words
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "maxwords",
  name: "maxwords",
  maxwords: 10,
  label: {
    text: "Full address"
  }
}) }}

Character count with count type 'length'

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="200" data-count-type="length">
  <label class="govuk-label" for="with-count-type-length">
    Enter a job description
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="with-count-type-length" name="example" rows="5" aria-describedby="with-count-type-length-info"></textarea>
  <div id="with-count-type-length-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 200 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-count-type-length",
  name: "example",
  countType: "length",
  maxlength: 200,
  label: {
    text: "Enter a job description"
  }
}) }}

Character count with count type 'characters'

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="200" data-count-type="characters">
  <label class="govuk-label" for="with-count-type-characters">
    Enter a job description
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="with-count-type-characters" name="example" rows="5" aria-describedby="with-count-type-characters-info"></textarea>
  <div id="with-count-type-characters-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 200 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-count-type-characters",
  name: "example",
  countType: "characters",
  maxlength: 200,
  label: {
    text: "Enter a job description"
  }
}) }}

Character count with count type 'characters' and value

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="350" data-count-type="characters">
  <label class="govuk-label" for="with-count-type-characters-value">
    Enter a job description
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="with-count-type-characters-value" name="example" rows="5" aria-describedby="with-count-type-characters-value-info">👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels.</textarea>
  <div id="with-count-type-characters-value-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 350 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-count-type-characters-value",
  name: "example",
  countType: "characters",
  maxlength: 350,
  label: {
    text: "Enter a job description"
  },
  value:
    "👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
}) }}

Character count with count type 'characters' and error message

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-form-group--error govuk-character-count" data-module="govuk-character-count" data-maxlength="350" data-count-type="characters">
  <label class="govuk-label" for="with-count-type-characters-error">
    Enter a job description
  </label>
  <p id="with-count-type-characters-error-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Job description must be 350 characters or less
  </p>
  <textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count" id="with-count-type-characters-error" name="example" rows="5" aria-describedby="with-count-type-characters-error-info with-count-type-characters-error-error">👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format.</textarea>
  <div id="with-count-type-characters-error-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 350 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-count-type-characters-error",
  name: "example",
  countType: "characters",
  maxlength: 350,
  label: {
    text: "Enter a job description"
  },
  errorMessage: {
    text: "Job description must be 350 characters or less"
  },
  value:
    "👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
}) }}

Character count with count type 'characters' and threshold

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="112" data-threshold="75" data-count-type="characters">
  <label class="govuk-label" for="with-count-type-characters-threshold">
    Enter a job description
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="with-count-type-characters-threshold" name="example" rows="5" aria-describedby="with-count-type-characters-threshold-info">Type another letter into this field after this message to see the threshold feature</textarea>
  <div id="with-count-type-characters-threshold-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 112 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-count-type-characters-threshold",
  name: "example",
  countType: "characters",
  maxlength: 112,
  threshold: 75,
  label: {
    text: "Enter a job description"
  },
  value:
    "Type another letter into this field after this message to see the threshold feature"
}) }}

Character count with count type 'words'

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="50" data-count-type="words">
  <label class="govuk-label" for="with-count-type-words">
    Enter a job description
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="with-count-type-words" name="example" rows="5" aria-describedby="with-count-type-words-info"></textarea>
  <div id="with-count-type-words-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 50 words
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-count-type-words",
  name: "example",
  countType: "words",
  maxlength: 50,
  label: {
    text: "Enter a job description"
  }
}) }}

Character count with count type 'words' and value

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="51" data-count-type="words">
  <label class="govuk-label" for="with-count-type-words-value">
    Enter a job description
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="with-count-type-words-value" name="example" rows="5" aria-describedby="with-count-type-words-value-info">👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels.</textarea>
  <div id="with-count-type-words-value-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 51 words
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-count-type-words-value",
  name: "example",
  countType: "words",
  maxlength: 51,
  label: {
    text: "Enter a job description"
  },
  value:
    "👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels."
}) }}

Character count with count type 'words' and error message

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-form-group--error govuk-character-count" data-module="govuk-character-count" data-maxlength="51" data-count-type="words">
  <label class="govuk-label" for="with-count-type-words-error">
    Enter a job description
  </label>
  <p id="with-count-type-words-error-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Job description must be 51 words or less
  </p>
  <textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count" id="with-count-type-words-error" name="example" rows="5" aria-describedby="with-count-type-words-error-info with-count-type-words-error-error">👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format.</textarea>
  <div id="with-count-type-words-error-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 51 words
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-count-type-words-error",
  name: "example",
  countType: "words",
  maxlength: 51,
  label: {
    text: "Enter a job description"
  },
  errorMessage: {
    text: "Job description must be 51 words or less"
  },
  value:
    "👩🏻‍🚀 A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format."
}) }}

Character count with count type 'words' and threshold

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="51" data-threshold="30" data-count-type="words">
  <label class="govuk-label" for="with-count-type-words-threshold">
    Enter a job description
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="with-count-type-words-threshold" name="example" rows="5" aria-describedby="with-count-type-words-threshold-info">Type another word into this field after this message to see the threshold feature</textarea>
  <div id="with-count-type-words-threshold-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 51 words
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-count-type-words-threshold",
  name: "example",
  countType: "words",
  maxlength: 51,
  threshold: 30,
  label: {
    text: "Enter a job description"
  },
  value:
    "Type another word into this field after this message to see the threshold feature"
}) }}

Character count with threshold

Open this example in a new tab

Code

Markup

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-threshold="75">
  <label class="govuk-label" for="with-threshold">
    Full address
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="with-threshold" name="with-threshold" rows="5" aria-describedby="with-threshold-info"></textarea>
  <div id="with-threshold-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 10 characters
  </div>
</div>

Macro

{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  id: "with-threshold",
  name: "with-threshold",
  maxlength: 10,
  threshold: 75,
  label: {
    text: "Full address"
  }
}) }}