Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.
Textarea
Use a textarea to help a user enter an answer to a question that is likely to be longer than one line. For example, to answer an open-ended question.
{% from "components/textarea/_macro.njk" import onsTextarea %}
{{
onsTextarea({
"id": "textarea",
"name": "feedback",
"label": {
"text": "Please provide some feedback",
"description": "For example, describe any difficulties you experienced in the use of this service"
}
})
}}
Nunjucks macro options
Name
Type
Required
Description
id
string
true
The HTML id of the textarea. Sets the HTML for attribute on the label.
classes
string
false
Classes to add to the textarea
name
string
false
The HTML name attribute for the textarea
value
string
false
The HTML value for the textarea to set a preset value for the field
attributes
object
false
HTML attributes (for example, data attributes) to add to the textarea
The maximum number of characters allowed in the input
charCountPlural
string
true
The string displayed when multiple characters can be entered before the limit is reached. Set {x} in the string to be replaced with the number, for example “You have {x} characters remaining”.
charCountSingular
string
true
The string displayed when one more character can be entered before the limit is reached. Set {x} in the string to be replaced with the number, for example “You have {x} character remaining”.
Label
Name
Type
Required
Description
text
string
true
The text content of the label
for
string
true
Set with the HTML id of the textarea the label is for
description
string
false
Hint text to help users fill in the input
classes
string
false
Classes to add to the label
HTML
<div class="ons-field">
<label class="ons-label ons-label--with-description" aria-describedby="description-hint" for="textarea">Please provide
some feedback</label>
<span id="description-hint" class="ons-label__description ons-input--with-description">For example, describe any
difficulties you experienced in the use of this service</span>
<textarea id="textarea" class="ons-input ons-input--textarea " name="feedback" rows="8"></textarea>
</div>
When not to use this component
Open-ended questions can be difficult for users to answer.
Consider breaking down the question into simpler questions that can be using an input or radios.
How to use this component
Labels
All textarea components must have a visible label.
This can be with or without a description.
Appropriate sizing
The size of a textarea should help the user understand what content it was intended for.
By default, the textarea component will fill the width of its container and has a default height of 8 lines of text.
Change the height of a textarea
To change the height of a textarea, use the rows parameter.
Change the width of a textarea
A textarea will fill 100% of the width of it’s container.
{% from "components/textarea/_macro.njk" import onsTextarea %}
{{
onsTextarea({
"id": "textarea-char-limit",
"name": "feedback-limited",
"width": "30",
"label": {
"text": "Please provide some feedback",
"description": "For example, describe any difficulties you experienced in the use of this service"
},
"charCheckLimit": {
"limit": 200,
"charCountSingular": "You have {x} character remaining",
"charCountPlural": "You have {x} characters remaining"
}
})
}}
Nunjucks macro options
Name
Type
Required
Description
id
string
true
The HTML id of the textarea. Sets the HTML for attribute on the label.
classes
string
false
Classes to add to the textarea
name
string
false
The HTML name attribute for the textarea
value
string
false
The HTML value for the textarea to set a preset value for the field
attributes
object
false
HTML attributes (for example, data attributes) to add to the textarea
The maximum number of characters allowed in the input
charCountPlural
string
true
The string displayed when multiple characters can be entered before the limit is reached. Set {x} in the string to be replaced with the number, for example “You have {x} characters remaining”.
charCountSingular
string
true
The string displayed when one more character can be entered before the limit is reached. Set {x} in the string to be replaced with the number, for example “You have {x} character remaining”.
Label
Name
Type
Required
Description
text
string
true
The text content of the label
for
string
true
Set with the HTML id of the textarea the label is for
description
string
false
Hint text to help users fill in the input
classes
string
false
Classes to add to the label
HTML
<div class="ons-field">
<label class="ons-label ons-label--with-description" aria-describedby="description-hint"
for="textarea-char-limit">Please provide some feedback</label>
<span id="description-hint" class="ons-label__description ons-input--with-description">For example, describe any
difficulties you experienced in the use of this service</span>
<textarea id="textarea-char-limit" class="ons-input ons-input--textarea ons-js-char-limit-input ons-input--w-30"
name="feedback-limited" rows="8" maxlength="200" data-char-limit-ref="textarea-char-limit-lim-remaining"
aria-describedby="textarea-char-limit-lim-remaining"></textarea>
<span id="textarea-char-limit-lim-remaining" class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-xs"
data-charcount-singular="You have {x} character remaining" data-charcount-plural="You have {x} characters remaining"
data-charcount-limit-singular="" data-charcount-limit-plural="">
</span>
</div>
How to check a textarea
To help users enter something in a required textarea:
check they have entered something in the textarea
show an error message if they have not entered anything
{% from "components/textarea/_macro.njk" import onsTextarea %}
{{
onsTextarea({
"id": "textarea",
"name": "feedback",
"label": {
"text": "Please provide some feedback",
"description": "For example, describe any difficulties you experienced in the use of this service"
},
"error": {
"id": "feedback-error",
"text": "Enter your feedback"
}
})
}}
Nunjucks macro options
Name
Type
Required
Description
id
string
true
The HTML id of the textarea. Sets the HTML for attribute on the label.
classes
string
false
Classes to add to the textarea
name
string
false
The HTML name attribute for the textarea
value
string
false
The HTML value for the textarea to set a preset value for the field
attributes
object
false
HTML attributes (for example, data attributes) to add to the textarea
The maximum number of characters allowed in the input
charCountPlural
string
true
The string displayed when multiple characters can be entered before the limit is reached. Set {x} in the string to be replaced with the number, for example “You have {x} characters remaining”.
charCountSingular
string
true
The string displayed when one more character can be entered before the limit is reached. Set {x} in the string to be replaced with the number, for example “You have {x} character remaining”.
Label
Name
Type
Required
Description
text
string
true
The text content of the label
for
string
true
Set with the HTML id of the textarea the label is for
description
string
false
Hint text to help users fill in the input
classes
string
false
Classes to add to the label
HTML
<div class="ons-panel ons-panel--error ons-panel--no-title" id="feedback-error">
<span class="ons-panel__assistive-text ons-u-vh">Error: </span>
<div class="ons-panel__body">
<p class="ons-panel__error">
<strong>Enter your feedback</strong>
</p>
<div class="ons-field">
<label class="ons-label ons-label--with-description" aria-describedby="description-hint" for="textarea">Please
provide some feedback</label>
<span id="description-hint" class="ons-label__description ons-input--with-description">For example, describe any
difficulties you experienced in the use of this service</span>
<textarea id="textarea" class="ons-input ons-input--textarea ons-input--error " name="feedback"
rows="8"></textarea>
</div>
</div>
</div>
If the textarea is empty
Use “Enter [whatever type of text is being asked for]”. For example, “Enter your feedback” or “Enter a job title”.
Research on this component
This component was last user tested between February and September 2020. The following findings were reported:
along with the size of the textarea, the character limit helps users know how long their answer should be
the character counter is often not noticed until the user starts to enter text
users that look down at a keyboard while they type may not notice the character counter
users prefer a limit on characters that can be entered as it prevents them entering far more text than is needed
the change from black to red text when the character limit is reached helps users notice the counter