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 custom textarea description

with textarea description translated into Welsh.

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-textarea-description">
    Can you provide more detail?
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="custom-textarea-description" name="custom-textarea-description" rows="5" aria-describedby="custom-textarea-description-info"></textarea>
  <div id="custom-textarea-description-info" class="govuk-hint govuk-character-count__message">
    Gallwch ddefnyddio hyd at 10 nod
  </div>
</div>

Macro

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

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

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 word count

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">
  <label class="govuk-label" for="word-count">
    Full address
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="word-count" name="word-count" rows="5" aria-describedby="word-count-info"></textarea>
  <div id="word-count-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: "word-count",
  name: "word-count",
  maxwords: 10,
  label: {
    text: "Full address"
  }
}) }}

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

Character count with translations

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-i18n.characters-under-limit.other="%{count} characters to go" data-i18n.characters-under-limit.one="One character to go" data-i18n.characters-at-limit="Zero characters left" data-i18n.characters-over-limit.other="%{count} characters too many" data-i18n.characters-over-limit.one="One character too many" data-i18n.words-under-limit.other="%{count} words to go" data-i18n.words-under-limit.one="One word to go" data-i18n.words-at-limit="Zero words left" data-i18n.words-over-limit.other="%{count} words too many" data-i18n.words-over-limit.one="One word too many">
  <label class="govuk-label" for="with-translations">
    Full address
  </label>
  <textarea class="govuk-textarea govuk-js-character-count" id="with-translations" name="with-translations" rows="5" aria-describedby="with-translations-info"></textarea>
  <div id="with-translations-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-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"
  }
}) }}