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 characters a user can enter is required, the max_length parameter can be used. Feedback on how close the user is to the limit will be shown benath the textarea. An error will be shown if the limit is exceeeded.

To limit the number of words instead of characters also pass in count_type: :words

Input

= f.govuk_text_area :cv,
  label: { text: 'Curriculum vitae' },
  max_length: 20,
  count_type: :words

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

Output

You can enter up to 20 words

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="20" data-count-type="words">
  <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_length: 10,
  threshold: 50

<%= f.govuk_text_area :education_history, label: { text: 'Education history' }, max_length: 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>

Customising the limit text

When localising the textarea you can configure the strings used by the component using the parameters:

• under_limit_other_text
• under_limit_one_text
• at_limit_text
• over_limit_other_text
• over_limit_one_text

The %{count} placeholder will be replaced by the number of characters or words away from the limit you are.

Input

= f.govuk_text_area :personal_statement,
  label: { text: 'Déclaration personnelle' },
  max_length: 20,
  under_limit_other_text: '%{count} caractères restants' ,
  under_limit_one_text: '%{count} caractère restant',
  at_limit_text: 'Plus aucun caractère restant',
  over_limit_other_text: '%{count} caractères de trop' ,
  over_limit_one_text: '%{count} caractère de trop'

<%= f.govuk_text_area :personal_statement, label: { text: 'Déclaration personnelle' }, max_length: 20, under_limit_other_text: '%{count} caractères restants' , under_limit_one_text: '%{count} caractère restant', at_limit_text: 'Plus aucun caractère restant', over_limit_other_text: '%{count} caractères de trop' , over_limit_one_text: '%{count} caractère de trop' %>

Output

You can enter up to 20 characters

<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="20" data-i18n.characters-under-limit.other="%{count} caractères restants" data-i18n.characters-under-limit.one="%{count} caractère restant" data-i18n.characters-at-limit="Plus aucun caractère restant" data-i18n.characters-over-limit.other="%{count} caractères de trop" data-i18n.characters-over-limit.one="%{count} caractère de trop">
  <label for="person-personal-statement-field" class="govuk-label">
    Déclaration personnelle
  </label>
  <textarea id="person-personal-statement-field" class="govuk-textarea govuk-js-character-count" rows="5" aria-describedby="person-personal-statement-field-info" name="person[personal_statement]"></textarea>
  <span id="person-personal-statement-field-info" class="govuk-hint govuk-character-count__message">
    You can enter up to 20 characters
  </span>
</div>