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