Components

Character count

Help users know how much text they can enter when there is a limit on the number of characters.

See the GOV.UK Design System documentation on character counts for more information on when to use this component.

Can you provide more detail?

Do not include personal or financial information, like your National Insurance number or credit card details.

<gv-character-count 
  label="Can you provide more detail?" 
  :label-is-page-heading="true" 
  label-class="govuk-label--l"
  :max-chars="200"
>
  <template #hint>
    Do not include personal or financial information, like your National Insurance number or credit card details. 
  </template>
</gv-character-count>

Counting words instead of characters

Use the max-words prop to count words instead of characters. A word is any group of consecutive non-whitespace characters.

Enter a job description

<gv-character-count 
  label="Enter a job description" 
  :label-is-page-heading="true" 
  label-class="govuk-label--l"
  :max-words="150"
/>

Hiding the message until the user is near the limit

You can choose to display a character count message when the length of text within the textarea passes a certain ‘threshold’ of characters or words.

Use the threshold prop to set the threshold. The number you pass will be treated as a percentage - for example, :threshold="75" for 75% - and the count message will only be shown when the user has entered a length of text that's above that percentage of the limit.

Can you provide more detail?

<script setup lang="ts">
import { ref } from 'vue'

const text = ref(`This example of a textarea has a character limit of 1000 characters. The character count is hidden, but will appear when more than 850 characters are entered in this textarea. Type some more text into this textarea to see the character count appear. This paragraph will now repeat 2 more times.

This example of a textarea has a character limit of 1000 characters. The character count is hidden, but will appear when more than 850 characters are entered in this textarea. Type some more text into this textarea to see the character count appear. This paragraph will now repeat 1 more time.

This example of a textarea has a character limit of 1000 characters. The character count is hidden, but will appear when more than 850 characters are entered in this textarea. Type some more text into this textarea to see the character count appear.`)
</script>

<template>
  <gv-character-count
    v-model="text"
    label="Can you provide more detail?"
    :label-is-page-heading="true"
    label-class="govuk-label--l"
    :max-chars="1000"
    :threshold="85"
  />
</template>

Error messages

You should validate the length of the user's input when they submit the form. If it's over the limit, use the error-message prop or slot to show a message telling the user what the limit is. The character count message will continue to tell them how far over the limit they are.

Enter a job description

Error:Job description must be 350 characters or less

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('A frontend developer designs, builds and improves website software that meets user needs. You will design software which meets user needs and creates meaningful interactions and relationships with users. You will have an understanding of the three fundamental frontend technologies (HTML, CSS and JavaScript). You will create code that is open by default and easy for others to reuse.')
</script>

<template>
  <gv-character-count
    v-model="text"
    label="Enter a job description"
    :label-is-page-heading="true"
    label-class="govuk-label--l"
    :max-chars="350"
    error-message="Job description must be 350 characters or less"
  />
</template>

Props

Name	Type	Description
modelValue	string	The value of the textarea. In most cases you should use `v-model` instead of setting this prop directly.
id	string	The ID for this textarea. If you don't provide an ID, one will be generated automatically.
name	string	The name of the textarea, which is submitted with the form data.
rows	number	Number of textarea rows Defaults to `5`.
describedBy	string	One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
autocomplete	string	Attribute to identify input purpose, for example `street-address`. See autofill for full list of values that can be used.
spellcheck	boolean	Sets the `spellcheck` attribute on the textarea Defaults to `null`.
disabled	boolean	If `true`, textarea will be disabled.
formGroupClass	string\|array\|object	Classes to add to the form group. You can bind a string, an array or an object, as with normal Vue class bindings.
label	string	Text to use within the label. If content is provided in the default slot, this prop will be ignored.
labelIsPageHeading	boolean	Whether the label also acts as the heading for the page. Defaults to `false`.
labelClass	string\|array\|object	Classes to add to the label tag. You can bind a string, an array or an object, as with normal Vue class bindings.
hint	string	Text to use within the hint. If content is provided in the `hint` slot, this prop will be ignored.
hintClass	string\|array\|object	Classes to add to the hint span tag. You can bind a string, an array or an object, as with normal Vue class bindings.
errorMessage	string	Text to use within the error message. If content is provided in the `error-message` slot, this prop will be ignored.
errorMessageClass	string\|array\|object	Classes to add to the error message `<p>` tag. You can bind a string, an array or an object, as with normal Vue class bindings.
errorMessageVisuallyHiddenText	string	A visually hidden prefix used before the error message. Defaults to `'Error'`.
maxChars	number	The maximum number of characters. If `maxWords` is provided, the `maxChars` option will be ignored.
maxWords	number	The maximum number of words. If `maxWords` is provided, the `maxChars` option will be ignored.
threshold	number	The percentage value of the limit at which point the count message is displayed. If this prop is set, the count message will be hidden by default. Defaults to `0`.
messageClass	string\|array\|object	Classes to add to the count message. You can bind a string, an array or an object, as with normal Vue class bindings.
textareaDescription	string	Message made available to assistive technologies to describe that the component accepts only a limited amount of content. The component will replace the `%{count}` placeholder with the value of the maxChars or maxWords param.
charactersUnderLimitText	string	Message displayed when the number of characters is under the configured maximum, `maxChars`. This message is displayed visually and through assistive technologies. The component will replace the `%{count}` placeholder with the number of remaining characters. Defaults to `'You have ${count} characters remaining'`.
charactersUnderLimitTextOne	string	Message used instead of `charactersUnderLimitText` when there is only one character remaining. Defaults to `'You have 1 character remaining'`.
charactersAtLimitText	string	Message displayed when the number of characters reaches the configured maximum, `maxChars`. This message is displayed visually and through assistive technologies. Defaults to `'You have 0 characters remaining'`.
charactersOverLimitText	string	Message displayed when the number of characters is over the configured maximum, `maxChars`. This message is displayed visually and through assistive technologies. The component will replace the `${count}`placeholder with the number of remaining characters. Defaults to `'You have ${count} characters too many'`.
charactersOverLimitTextOne	string	Message used instead of`charactersOverLimitText`when the text is one character over. Defaults to `'You have 1 character too many'`.
wordsUnderLimitText	string	Message displayed when the number of words is under the configured maximum,`maxWords`. This message is displayed visually and through assistive technologies. The component will replace the `${count}` placeholder with the number of remaining characters. Defaults to `'You have ${count} words remaining'`.
wordsUnderLimitTextOne	string	Message used instead of `wordsUnderLimitText` when there is only one word remaining. Defaults to `'You have 1 word remaining'`.
wordsAtLimitText	string	Message displayed when the number of words reaches the configured maximum, `maxWords`. This message is displayed visually and through assistive technologies. Defaults to `'You have 0 words remaining'`.
wordsOverLimitText	string	Message displayed when the number of words is over the configured maximum, `maxWords`. This message is displayed visually and through assistive technologies. The component will replace the `${count}`placeholder with the number of remaining characters. Defaults to `'You have ${count} words too many'`.
wordsOverLimitTextOne	string	Message used instead of`wordsOverLimitText`when the text is one word over. Defaults to `'You have 1 word too many'`.

Slots

Name	Description
label	The content of the label. If content is provided in this slot, the`label`prop will be ignored.
hint	The content of the hint. If content is provided in this slot, the`hint`prop will be ignored.
error-message	The content of the error message. If content is provided in this slot, the`errorMessage` prop will be ignored.