Character count examples

• # default

  Open this example in a new tab

  You can enter up to 10 characters

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

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "name": "more-detail",
    "maxlength": 10,
    "label": {
      "text": "Can you provide more detail?"
    }
  }) }}
          

• # with hint

  Open this example in a new tab

  Don't include personal or financial information, eg your National Insurance number or credit card details.

  You can enter up to 10 characters

  {
    "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."
    }
  }

  
  {% 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."
    }
  }) }}
          

• # with hint and error

  Open this example in a new tab

  Don't include personal or financial information, eg your National Insurance number or credit card details.

  Please provide more detail

  You can enter up to 10 characters

  {
    "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."
    }
  }

  
  {% 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."
    }
  }) }}
          

• # with default value

  Open this example in a new tab

  221B Baker Street London NW1 6XE

  You can enter up to 100 characters

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

  
  {% 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"
  }) }}
          

• # with default value exceeding limit

  Open this example in a new tab

  Please do not exceed the maximum allowed limit

  221B Baker Street London NW1 6XE

  You can enter up to 10 characters

  {
    "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"
    }
  }

  
  {% 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"
    }
  }) }}
          

• # with custom rows

  Open this example in a new tab

  You can enter up to 10 characters

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

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "custom-rows",
    "name": "custom",
    "maxlength": 10,
    "label": {
      "text": "Full address"
    },
    "rows": 8
  }) }}
          

• # with label as page heading

  Open this example in a new tab

  You can enter up to 10 characters

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

  
  {% 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
    }
  }) }}
          

• # with word count

  Open this example in a new tab

  You can enter up to 10 words

  {
    "id": "word-count",
    "name": "word-count",
    "maxwords": 10,
    "label": {
      "text": "Full address"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "word-count",
    "name": "word-count",
    "maxwords": 10,
    "label": {
      "text": "Full address"
    }
  }) }}
          

• # with threshold

  Open this example in a new tab

  You can enter up to 10 characters

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

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "with-threshold",
    "name": "with-threshold",
    "maxlength": 10,
    "threshold": 75,
    "label": {
      "text": "Full address"
    }
  }) }}
          

• # with custom textarea description

  Open this example in a new tab

  Gallwch ddefnyddio hyd at 10 nod

  {
    "name": "custom-textarea-description",
    "id": "custom-textarea-description",
    "maxlength": 10,
    "label": {
      "text": "Can you provide more detail?"
    },
    "textareaDescriptionText": "Gallwch ddefnyddio hyd at %{count} nod"
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "name": "custom-textarea-description",
    "id": "custom-textarea-description",
    "maxlength": 10,
    "label": {
      "text": "Can you provide more detail?"
    },
    "textareaDescriptionText": "Gallwch ddefnyddio hyd at %{count} nod"
  }) }}
          

• # classes

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "id": "with-classes",
    "name": "with-classes",
    "maxlength": 10,
    "label": {
      "text": "With classes"
    },
    "classes": "app-character-count--custom-modifier"
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "with-classes",
    "name": "with-classes",
    "maxlength": 10,
    "label": {
      "text": "With classes"
    },
    "classes": "app-character-count--custom-modifier"
  }) }}
          

• # id

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "id": "character-count-id",
    "name": "test-name",
    "maxlength": 10,
    "label": {
      "text": "With custom id"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "character-count-id",
    "name": "test-name",
    "maxlength": 10,
    "label": {
      "text": "With custom id"
    }
  }) }}
          

• # attributes

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "id": "with-attributes",
    "name": "with-attributes",
    "maxlength": 10,
    "label": {
      "text": "With attributes"
    },
    "attributes": {
      "data-attribute": "my data value"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "with-attributes",
    "name": "with-attributes",
    "maxlength": 10,
    "label": {
      "text": "With attributes"
    },
    "attributes": {
      "data-attribute": "my data value"
    }
  }) }}
          

• # formGroup with classes

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "id": "with-formgroup",
    "name": "with-formgroup",
    "maxlength": 10,
    "label": {
      "text": "With formgroup"
    },
    "formGroup": {
      "classes": "app-character-count--custom-modifier"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "with-formgroup",
    "name": "with-formgroup",
    "maxlength": 10,
    "label": {
      "text": "With formgroup"
    },
    "formGroup": {
      "classes": "app-character-count--custom-modifier"
    }
  }) }}
          

• # custom classes on countMessage

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "id": "with-custom-countmessage-class",
    "name": "with-custom-countmessage-class",
    "maxlength": 10,
    "label": {
      "text": "With custom countMessage class"
    },
    "countMessage": {
      "classes": "app-custom-count-message"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "with-custom-countmessage-class",
    "name": "with-custom-countmessage-class",
    "maxlength": 10,
    "label": {
      "text": "With custom countMessage class"
    },
    "countMessage": {
      "classes": "app-custom-count-message"
    }
  }) }}
          

• # spellcheck enabled

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "id": "with-spellcheck",
    "name": "with-spellcheck",
    "maxlength": 10,
    "label": {
      "text": "With spellcheck"
    },
    "spellcheck": true
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "with-spellcheck",
    "name": "with-spellcheck",
    "maxlength": 10,
    "label": {
      "text": "With spellcheck"
    },
    "spellcheck": true
  }) }}
          

• # spellcheck disabled

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "id": "without-spellcheck",
    "name": "without-spellcheck",
    "maxlength": 10,
    "label": {
      "text": "Without spellcheck"
    },
    "spellcheck": false
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "without-spellcheck",
    "name": "without-spellcheck",
    "maxlength": 10,
    "label": {
      "text": "Without spellcheck"
    },
    "spellcheck": false
  }) }}
          

• # custom classes with error message

  Open this example in a new tab

  Error message

  You can enter up to 10 characters

  {
    "id": "with-custom-error-class",
    "name": "with-custom-error-class",
    "maxlength": 10,
    "label": {
      "text": "With custom error class"
    },
    "classes": "app-character-count--custom-modifier",
    "errorMessage": {
      "text": "Error message"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "with-custom-error-class",
    "name": "with-custom-error-class",
    "maxlength": 10,
    "label": {
      "text": "With custom error class"
    },
    "classes": "app-character-count--custom-modifier",
    "errorMessage": {
      "text": "Error message"
    }
  }) }}
          

• # with id starting with number

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "name": "more-detail",
    "id": "1_more-detail",
    "maxlength": 10,
    "label": {
      "text": "Can you provide more detail?"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "name": "more-detail",
    "id": "1_more-detail",
    "maxlength": 10,
    "label": {
      "text": "Can you provide more detail?"
    }
  }) }}
          

• # with id with special characters

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "id": "user1.profile[address]",
    "name": "address",
    "maxlength": 10,
    "label": {
      "text": "Full address"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "user1.profile[address]",
    "name": "address",
    "maxlength": 10,
    "label": {
      "text": "Full address"
    }
  }) }}
          

• # with textarea maxlength attribute

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "id": "maxlength-should-be-removed",
    "name": "address",
    "maxlength": 10,
    "attributes": {
      "maxlength": 10
    },
    "label": {
      "text": "Full address"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "maxlength-should-be-removed",
    "name": "address",
    "maxlength": 10,
    "attributes": {
      "maxlength": 10
    },
    "label": {
      "text": "Full address"
    }
  }) }}
          

• # to configure in JavaScript

  Open this example in a new tab

  {
    "id": "to-configure-in-javascript",
    "name": "address",
    "label": {
      "text": "Full address"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "to-configure-in-javascript",
    "name": "address",
    "label": {
      "text": "Full address"
    }
  }) }}
          

• # when neither maxlength nor maxwords are set

  Open this example in a new tab

  {
    "id": "no-maximum",
    "name": "no-maximum",
    "label": {
      "text": "Full address"
    },
    "textareaDescriptionText": "No more than %{count} characters"
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "no-maximum",
    "name": "no-maximum",
    "label": {
      "text": "Full address"
    },
    "textareaDescriptionText": "No more than %{count} characters"
  }) }}
          

• # when neither maxlength/maxwords nor textarea description are set

  Open this example in a new tab

  {
    "id": "no-maximum",
    "name": "no-maximum",
    "label": {
      "text": "Full address"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "no-maximum",
    "name": "no-maximum",
    "label": {
      "text": "Full address"
    }
  }) }}
          

• # with translations

  Open this example in a new tab

  You can enter up to 10 characters

  {
    "id": "with-translations",
    "name": "with-translations",
    "maxlength": 10,
    "label": {
      "text": "Full address"
    },
    "charactersUnderLimitText": {
      "other": "%{count} characters to go",
      "one": "One character to go"
    },
    "charactersAtLimitText": "Zero characters left",
    "charactersOverLimitText": {
      "other": "%{count} characters too many",
      "one": "One character too many"
    },
    "wordsUnderLimitText": {
      "other": "%{count} words to go",
      "one": "One word to go"
    },
    "wordsAtLimitText": "Zero words left",
    "wordsOverLimitText": {
      "other": "%{count} words too many",
      "one": "One word too many"
    }
  }

  
  {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
  
  {{ govukCharacterCount({
    "id": "with-translations",
    "name": "with-translations",
    "maxlength": 10,
    "label": {
      "text": "Full address"
    },
    "charactersUnderLimitText": {
      "other": "%{count} characters to go",
      "one": "One character to go"
    },
    "charactersAtLimitText": "Zero characters left",
    "charactersOverLimitText": {
      "other": "%{count} characters too many",
      "one": "One character too many"
    },
    "wordsUnderLimitText": {
      "other": "%{count} words to go",
      "one": "One word to go"
    },
    "wordsAtLimitText": "Zero words left",
    "wordsOverLimitText": {
      "other": "%{count} words too many",
      "one": "One word too many"
    }
  }) }}