Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Character count

These examples are used for automated tests and may not follow service manual best practice.

Character count default

Open this example in a new tab: Character count default

Do not include personal information like your name, date of birth or NHS number
You can enter up to 200 characters
Code

Markup

<div class="nhsuk-form-group nhsuk-character-count" data-module="nhsuk-character-count" data-maxlength="200">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="example">
      Can you provide more detail?
    </label>
  </h1>
  <div class="nhsuk-hint" id="example-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <textarea class="nhsuk-textarea nhsuk-js-character-count" id="example" name="example" rows="5" aria-describedby="example-info example-hint"></textarea>
  <div class="nhsuk-hint nhsuk-character-count__message" id="example-info">
    You can enter up to 200 characters
  </div>
</div>

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Can you provide more detail?",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  name: "example",
  maxlength: 200
}) }}

Character count with size S label

Open this example in a new tab: Character count with size S label

You can enter up to 200 characters
Code

Markup

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

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Can you provide more detail?",
    size: "s",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  maxlength: 200
}) }}

Character count with size M label

Open this example in a new tab: Character count with size M label

You can enter up to 200 characters
Code

Markup

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

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Can you provide more detail?",
    size: "m",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  maxlength: 200
}) }}

Character count with size L label

Open this example in a new tab: Character count with size L label

You can enter up to 200 characters
Code

Markup

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

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Can you provide more detail?",
    size: "l",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  maxlength: 200
}) }}

Character count with size XL label

Open this example in a new tab: Character count with size XL label

You can enter up to 200 characters
Code

Markup

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

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Can you provide more detail?",
    size: "xl",
    isPageHeading: true
  },
  id: "custom-size",
  name: "example",
  maxlength: 200
}) }}

Character count with custom rows

Open this example in a new tab: Character count with custom rows

You can enter up to 350 characters
Code

Markup

<div class="nhsuk-form-group nhsuk-character-count" data-module="nhsuk-character-count" data-maxlength="350">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="custom-rows">
      Can you provide more detail?
    </label>
  </h1>
  <textarea class="nhsuk-textarea nhsuk-js-character-count" id="custom-rows" name="example" rows="15" aria-describedby="custom-rows-info"></textarea>
  <div class="nhsuk-hint nhsuk-character-count__message" id="custom-rows-info">
    You can enter up to 350 characters
  </div>
</div>

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Can you provide more detail?",
    size: "l",
    isPageHeading: true
  },
  id: "custom-rows",
  name: "example",
  maxlength: 350,
  rows: 15
}) }}

Character count with error message

Open this example in a new tab: Character count with error message

Error: Job description must be 350 characters or less

You can enter up to 350 characters
Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error nhsuk-character-count" data-module="nhsuk-character-count" data-maxlength="350">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-error-message">
      Enter a job description
    </label>
  </h1>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Job description must be 350 characters or less
  </p>
  <textarea class="nhsuk-textarea nhsuk-textarea--error nhsuk-js-character-count" id="with-error-message" name="example" rows="5" aria-describedby="with-error-message-info with-error-message-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 class="nhsuk-hint nhsuk-character-count__message" id="with-error-message-info">
    You can enter up to 350 characters
  </div>
</div>

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Enter a job description",
    size: "l",
    isPageHeading: true
  },
  errorMessage: {
    text: "Job description must be 350 characters or less"
  },
  id: "with-error-message",
  name: "example",
  maxlength: 350,
  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 hint

Open this example in a new tab: Character count with hint

Do not include personal information like your name, date of birth or NHS number
You can enter up to 200 characters
Code

Markup

<div class="nhsuk-form-group nhsuk-character-count" data-module="nhsuk-character-count" data-maxlength="200">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-hint">
      Enter a job description
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-hint-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <textarea class="nhsuk-textarea nhsuk-js-character-count" id="with-hint" name="example" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
  <div class="nhsuk-hint nhsuk-character-count__message" id="with-hint-info">
    You can enter up to 200 characters
  </div>
</div>

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Enter a job description",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  id: "with-hint",
  name: "example",
  maxlength: 200
}) }}

Character count with hint and error

Open this example in a new tab: Character count with hint and error

Do not include personal information like your name, date of birth or NHS number

Error: Job description must be 350 characters or less

You can enter up to 350 characters
Code

Markup

<div class="nhsuk-form-group nhsuk-form-group--error nhsuk-character-count" data-module="nhsuk-character-count" data-maxlength="350">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-error-message">
      Enter a job description
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-error-message-hint">
    Do not include personal information like your name, date of birth or NHS number
  </div>
  <p class="nhsuk-error-message" id="with-error-message-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Job description must be 350 characters or less
  </p>
  <textarea class="nhsuk-textarea nhsuk-textarea--error nhsuk-js-character-count" id="with-error-message" name="example" rows="5" aria-describedby="with-error-message-info with-error-message-hint with-error-message-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 class="nhsuk-hint nhsuk-character-count__message" id="with-error-message-info">
    You can enter up to 350 characters
  </div>
</div>

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Enter a job description",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "Do not include personal information like your name, date of birth or NHS number"
  },
  errorMessage: {
    text: "Job description must be 350 characters or less"
  },
  id: "with-error-message",
  name: "example",
  maxlength: 350,
  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 without page heading

Open this example in a new tab: Character count without page heading

You can enter up to 150 characters
Code

Markup

<div class="nhsuk-form-group nhsuk-character-count" data-module="nhsuk-character-count" data-maxlength="150">
  <label class="nhsuk-label" for="without-heading">
    Tell us more about what happened
  </label>
  <textarea class="nhsuk-textarea nhsuk-js-character-count" id="without-heading" name="example" rows="5" aria-describedby="without-heading-info"></textarea>
  <div class="nhsuk-hint nhsuk-character-count__message" id="without-heading-info">
    You can enter up to 150 characters
  </div>
</div>

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Tell us more about what happened"
  },
  id: "without-heading",
  name: "example",
  maxlength: 150
}) }}

Character count with threshold

Open this example in a new tab: Character count with threshold

You can enter up to 112 characters
Code

Markup

<div class="nhsuk-form-group nhsuk-character-count" data-module="nhsuk-character-count" data-maxlength="112" data-threshold="75">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-threshold">
      Can you provide more detail?
    </label>
  </h1>
  <textarea class="nhsuk-textarea nhsuk-js-character-count" id="with-threshold" name="example" rows="5" aria-describedby="with-threshold-info">Type another letter into this field after this message to see the threshold feature</textarea>
  <div class="nhsuk-hint nhsuk-character-count__message" id="with-threshold-info">
    You can enter up to 112 characters
  </div>
</div>

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Can you provide more detail?",
    size: "l",
    isPageHeading: true
  },
  id: "with-threshold",
  name: "example",
  value:
    "Type another letter into this field after this message to see the threshold feature",
  maxlength: 112,
  threshold: 75
}) }}

Character count with translations

Open this example in a new tab: Character count with translations

Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG
Gallwch ddefnyddio hyd at 200 nod
Code

Markup

<div class="nhsuk-form-group nhsuk-character-count" data-module="nhsuk-character-count" data-maxlength="200" data-i18n.characters-under-limit.one="Mae gennych %{count} nod ar ôl" data-i18n.characters-under-limit.two="Mae gennych %{count} nod ar ôl" data-i18n.characters-under-limit.few="Mae gennych %{count} nod ar ôl" data-i18n.characters-under-limit.many="Mae gennych %{count} nod ar ôl" data-i18n.characters-under-limit.other="Mae gennych %{count} nod ar ôl" data-i18n.characters-at-limit="Mae gennych 0 nod ar ôl" data-i18n.characters-over-limit.one="Mae gennych %{count} nod yn ormod" data-i18n.characters-over-limit.two="Mae gennych %{count} nod yn ormod" data-i18n.characters-over-limit.few="Mae gennych %{count} nod yn ormod" data-i18n.characters-over-limit.many="Mae gennych %{count} nod yn ormod" data-i18n.characters-over-limit.other="Mae gennych chi %{count} nod yn ormod">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-translations">
      Allwch chi roi mwy o fanylion?
    </label>
  </h1>
  <div class="nhsuk-hint" id="with-translations-hint">
    Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG
  </div>
  <textarea class="nhsuk-textarea nhsuk-js-character-count" id="with-translations" name="example" rows="5" aria-describedby="with-translations-info with-translations-hint"></textarea>
  <div class="nhsuk-hint nhsuk-character-count__message" id="with-translations-info">
    Gallwch ddefnyddio hyd at 200 nod
  </div>
</div>

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Allwch chi roi mwy o fanylion?",
    size: "l",
    isPageHeading: true
  },
  hint: {
    text: "Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG"
  },
  id: "with-translations",
  name: "example",
  maxlength: 200,
  textareaDescriptionText: "Gallwch ddefnyddio hyd at %{count} nod",
  charactersUnderLimitText: {
    one: "Mae gennych %{count} nod ar ôl",
    two: "Mae gennych %{count} nod ar ôl",
    few: "Mae gennych %{count} nod ar ôl",
    many: "Mae gennych %{count} nod ar ôl",
    other: "Mae gennych %{count} nod ar ôl"
  },
  charactersAtLimitText: "Mae gennych 0 nod ar ôl",
  charactersOverLimitText: {
    one: "Mae gennych %{count} nod yn ormod",
    two: "Mae gennych %{count} nod yn ormod",
    few: "Mae gennych %{count} nod yn ormod",
    many: "Mae gennych %{count} nod yn ormod",
    other: "Mae gennych chi %{count} nod yn ormod"
  }
}) }}

Character count with default value

Open this example in a new tab: Character count with default value

You can enter up to 350 characters
Code

Markup

<div class="nhsuk-form-group nhsuk-character-count" data-module="nhsuk-character-count" data-maxlength="350">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-default-value">
      Enter a job description
    </label>
  </h1>
  <textarea class="nhsuk-textarea nhsuk-js-character-count" id="with-default-value" name="example" rows="5" aria-describedby="with-default-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 class="nhsuk-hint nhsuk-character-count__message" id="with-default-value-info">
    You can enter up to 350 characters
  </div>
</div>

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Enter a job description",
    size: "l",
    isPageHeading: true
  },
  id: "with-default-value",
  name: "example",
  maxlength: 350,
  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 word count

Open this example in a new tab: Character count with word count

You can enter up to 150 words
Code

Markup

<div class="nhsuk-form-group nhsuk-character-count" data-module="nhsuk-character-count" data-maxwords="150">
  <h1 class="nhsuk-label-wrapper">
    <label class="nhsuk-label nhsuk-label--l" for="with-word-count">
      Enter a job description
    </label>
  </h1>
  <textarea class="nhsuk-textarea nhsuk-js-character-count" id="with-word-count" name="example" rows="5" aria-describedby="with-word-count-info"></textarea>
  <div class="nhsuk-hint nhsuk-character-count__message" id="with-word-count-info">
    You can enter up to 150 words
  </div>
</div>

Macro

{% from "character-count/macro.njk" import characterCount -%}

{{ characterCount({
  label: {
    text: "Enter a job description",
    size: "l",
    isPageHeading: true
  },
  id: "with-word-count",
  name: "example",
  maxwords: 150
}) }}