Character count
Help users know how much text they can enter when there is a limit on the number of characters.
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.
How it works
It tells users how many characters they have remaining as they type into a textarea with a character limit.
Users will get updates at a pace that works best for the way they interact with the textarea. This means:
sighted users will see a count message that updates as they type
screen reader users will hear the count announcement when they stop typing
This component does not restrict the user from entering information. The user can enter more than the character limit, but are told they’ve entered too many characters. This lets them type or copy and paste their full answer, then edit it down.
The count message appears below the textarea so that:
it’s clearly separate from any hint text or error message above the textarea
if it’s below the visible screen area, users will still see it again when they scroll down to send their response
This component uses JavaScript. If JavaScript is not available, users will see a static message in place of the count message, telling them how many characters they can enter.
If you are a developer, there are 2 ways to use the character count component. You can use HTML or, if you are using Nunjucks, you can use the Nunjucks macro.
Get the Nunjucks macro for this example from the Camden Frontend library
If you’re asking more than one question on the page
If you’re asking more than one question on the page, do not set the contents of the <label> as the page heading.
Get the Nunjucks macro for this example from the Camden Frontend library
Consider if a word count is more helpful
In some cases it may be more helpful to show a word count. For example, if your question requires a longer answer.
Do this by setting data-maxwords in the component HTML markup, or by setting the “maxwords” parameter for the Nunjucks macro. For example, data-maxwords="10" will set a word limit of 10.
Get the Nunjucks macro for this example from the Camden Frontend library
Avoid narrow limits
When using a character count, try to set the limit higher than most users will need. Find out what this is by doing user research and data analysis.
You can choose to display a character count message when the length of text within the textarea passes a certain ‘threshold’ of characters. This is useful when a character limit is needed due to the technical limitations of the service, but users are unlikely to reach that limit.
To do this, set the threshold in the component HTML markup or Nunjucks macro as a percentage. For example, data-threshold="75" or"threshold": 75 will show the count message only when the user has entered a length of text that’s 75% of the limit or more.
Screen reader users will hear the character limit when they first interact with a textarea using the threshold option. Sighted users will not see anything until the count message is shown – though you might choose to include the character limit in the hint text.
Get the Nunjucks macro for this example from the Camden Frontend library
Error messages
Error messages should be styled like this:
Get the Nunjucks macro for this example from the Camden Frontend library
If a user tries to send their response with too many characters, you must show an error message as well as a count message below the input field.
The error message tells users what went wrong and how to fix it. The count message provides live feedback and updates as a user types.
The input shows a red border only when the user tries to enter more than the character limit. If the number of characters is within the limit, the input component does not show this border even when there’s been an error. We felt it might cause the user difficulty if the border disappeared once they started typing.
Say ‘Enter [whatever it is]’.
For example, ‘Enter a summary’.
Say ‘[whatever it is] must be [number] characters or less’.
For example, ‘Summary must be 400 characters or less’.
Research on this component
This component is based on the character count component from the GOV.UK Design System.
You can take part in the ‘Character count’ discussion on GOV.UK’s Design System’s GitHub and share your research.