Skip to main content

This is a guide on using the GOV.UK Design System Form Builder

  1. Index
  2. Text area

Text area

Text areas allow users to enter text that's longer than a single line.

Users can find open-ended questions difficult to answer. It might be better to break up one complex question into a series of simple ones.

Generating a text area with a label, hint and nine rows

Input

= f.govuk_text_area :job_description,
  label: { text: 'Job description' },
  hint_text: 'Describe your typical day',
  rows: 9

Rendered output

Describe your typical day

HTML output

<div class="govuk-form-group">
  <label for="person-job-description-field" class="govuk-label">
    Job description
  </label>
  <span class="govuk-hint" id="person-job-description-hint">
    Describe your typical day
  </span>
  <textarea id="person-job-description-field" class="govuk-textarea" aria-describedby="person-job-description-hint" rows="9" name="person[job_description]"></textarea>
</div>

Generating a text area with a word limit

If a limit on the number of words or characters a user can enter is required, the max_chars and max_words parameters can be used. They provide feedback on how close the user is to the limit and automatically show an error if it is exceeeded.

Input

= f.govuk_text_area :cv,
  label: { text: 'Curriculum vitae' },
  max_words: 20

Rendered output

You can enter up to 20 words

HTML output

<div class="govuk-character-count" data-module="govuk-character-count" data-maxwords="20">
  <div class="govuk-form-group">
    <label for="person-cv-field" class="govuk-label">
      Curriculum vitae
    </label>
    <textarea id="person-cv-field" class="govuk-textarea govuk-js-character-count" aria-describedby="person-cv-field-info" rows="5" name="person[cv]"></textarea>
    <span id="person-cv-field-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
      You can enter up to 20 words
    </span>
  </div>
</div>

Generating a text area with a character limit and threshold

If the limit is much higher than most users are likely to reach, you can choose to only display the message after a user has entered a certain amount.

To do this, set the threshold parameter in conjunction with a word or character limit.

Input

= f.govuk_text_area :education_history,
  label: { text: 'Education history' },
  max_chars: 10,
  threshold: 50

Rendered output

You can enter up to 10 characters

HTML output

<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-threshold="50">
  <div class="govuk-form-group">
    <label for="person-education-history-field" class="govuk-label">
      Education history
    </label>
    <textarea id="person-education-history-field" class="govuk-textarea govuk-js-character-count" aria-describedby="person-education-history-field-info" rows="5" name="person[education_history]"></textarea>
    <span id="person-education-history-field-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
      You can enter up to 10 characters
    </span>
  </div>
</div>