Textarea

Textareas 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 textarea 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

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

Output

Describe your typical day

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

Generating a textarea 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

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

Output

You can enter up to 20 words

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

Generating a textarea 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

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

Output

You can enter up to 10 characters

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-threshold="50">
  <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" rows="5" aria-describedby="person-education-history-field-info" name="person[education_history]"></textarea>
  <span id="person-education-history-field-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 10 characters
  </span>
</div>