Character count

<div class="ds_question" data-module="ds-character-count">
    <label class="ds_label" for="first-name">First name</label>
    <input maxlength="20" class="ds_input  ds_input--fixed-10" type="text" id="first-name" />
</div>

About this component

A character count is an enhancement to standard text input and textarea components. It adds a live count of the remaining permitted characters so that the user knows how much they can type.

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.

<div class="ds_question" data-threshold="80" data-module="ds-character-count">
    <label class="ds_label" for="description">Description</label>
    <textarea maxlength="250" class="ds_input" rows="5" id="description">Mygov.scot gives people and businesses information about and access to public services in Scotland. We work closely with public sector organisations to make public services easy to find and understand.</textarea>
</div>

Implementation

A character limit can be set in two ways:

Maxlength attribute

Use a 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

Using a 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.