Character count

Standard

With maximum characters

Use a maximum characters count to tell users how many characters they can enter.

You can enter up to 10 characters

Show code

<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 class="govuk-hint govuk-character-count__message" id="more-detail-info">
    You can enter up to 10 characters
  </div>
</div>

---
import { FormGroup, InputLabel, CharacterCount, CharacterCountMessage } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup
  class="govuk-character-count"
  data-module="govuk-character-count"
  data-maxlength={10}
>
  <InputLabel for="more-detail">Can you provide more detail?</InputLabel>
  <CharacterCount
    id="more-detail"
    name="more-detail"
    rows="5"
    aria-describedby="more-detail-info"
  />
  <CharacterCountMessage id="more-detail-info">
    You can enter up to 10 characters
  </CharacterCountMessage>
</FormGroup>

import { FormGroup, InputLabel, CharacterCount, CharacterCountMessage } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup
      className="govuk-character-count"
      data-module="govuk-character-count"
      data-maxlength={10}
    >
      <InputLabel htmlFor="more-detail">Can you provide more detail?</InputLabel>
      <CharacterCount
        id="more-detail"
        name="more-detail"
        rows="5"
        aria-describedby="more-detail-info"
      />
      <CharacterCountMessage id="more-detail-info">
        You can enter up to 10 characters
      </CharacterCountMessage>
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, CharacterCount, CharacterCountMessage } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup
  class="govuk-character-count"
  data-module="govuk-character-count"
  data-maxlength={10}
>
  <InputLabel for="more-detail">Can you provide more detail?</InputLabel>
  <CharacterCount
    id="more-detail"
    name="more-detail"
    rows="5"
    aria-describedby="more-detail-info"
  />
  <CharacterCountMessage id="more-detail-info">
    You can enter up to 10 characters
  </CharacterCountMessage>
</FormGroup>

import { FormGroup, InputLabel, CharacterCount, CharacterCountMessage } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup
      class="govuk-character-count"
      data-module="govuk-character-count"
      data-maxlength={10}
    >
      <InputLabel for="more-detail">Can you provide more detail?</InputLabel>
      <CharacterCount
        id="more-detail"
        name="more-detail"
        rows="5"
        aria-describedby="more-detail-info"
      />
      <CharacterCountMessage id="more-detail-info">
        You can enter up to 10 characters
      </CharacterCountMessage>
    </FormGroup>
  );
}

When to use this component

Always test your service without a character count first.

Only use the character count component when there is a good reason for limiting the number of characters users can enter. For example, if there is:

• evidence that users are likely to enter more information than they need to
• a legal or technical reason that means an entry must be no more than a certain number of characters

When not to use this component

If your users keep hitting the character limit imposed by the backend of your service then try to increase the limit rather than use a character count.