About this component
Why we use this component
If a form field only allows a certain number of characters to be entered, it is helpful to let the user know how many remaining characters they are allowed.
Using the character count component is better than simply using a
maxlength attribute on the input element, because:
- it is non-destructive, so users can enter or paste too much data and get a warning instead of losing any of it
- users can see how many characters they have remaining as they type
Other versions of this component
A percentage threshold can be set at which the character count will be shown.
In this example the character count will show after 80 percent of the maximum has been used (240 characters out of 300). Remove some characters from the textarea to make the message disappear.
A character limit can be set in two ways:
maxlength attribute on the input element. This progresive enhancement is the most user-friendly way to do it because if for any reason the component is not initialised the character limit will still be imposed.
The maxlength attribute is removed when the component initialises to allow the user to overflow the input without losing any of their input data. They will instead be shown a warning that they have exceeded the character limit.
data-maxlength attribute to specify the character count behaves largely the same way as using a maxlength attribute, but without the fallback to using the native behaviour for an input field with a maxlength.
Feedback, help and support
There is a problem
Thanks for your feedback