SDC Pattern Library

Textarea

Rationale

Collection of longer passages of text from users was required for feedback and messages.

Rationale for the addition of a character limit to be added here.

  • helps user provide content in a limited number of characters
  • tells the user how many characters they have remaining, and counts down as they type
  • provides additional feedback for assistive technology so that all users are are aware of the character limit
  • when the limit is reached, no further characters are captured

related: GDS prototype

Research

Research undertaken here.

The user need in this instance was generated from a necessity to avoid reaching the character limit imposed by the WAF.

DAC feedback

Usage

Scope

Global

Analytics

If the character limit is reached then the analytics event of Error is sent with an action Textarea limit reached and the label Limit of {character-limit} reached/exceeded.

Dependencies

character-limit.js analytics.js domready.js

<div class="answer__fields js-fields">
    <label class="label venus " for="textarea-answer">
      Please provide some feedback
      <br/>
      <span class="label__description pluto">For example describe any difficulties you experienced in the use of this service</span>
  </label>
    <textarea class="input input--textarea js-charlimit-input" cols="60" rows="8" id="textarea-answer" name="textarea-answer" maxlength="40" aria-describedby="description-question guidance-answer-trigger textarea-answer-remaining" data-maxlength="40"></textarea>
    <div class="input__limit u-mt-xs mercury" data-qa="textarea-with-limit" id="textarea-answer-remaining" aria-live="polite">You have <span>40</span>.</div>
</div>
 
{
  "charlimit": "40",
  "textarea_id": "textarea-answer"
}