Form textarea
A textarea field and an associated label
How it looks (preview) (preview all)
How to call this component
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "Can you provide more detail?"
},
name: "more-detail"
} %>GOV.UK Design System
This component incorporates components from the GOV.UK Design System:
Accessibility acceptance criteria
The component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- be usable with touch
- indicate when they have focus
- be recognisable as form textarea elements
- have correctly associated labels
Labels use the label component.
Other examples
With id attribute (preview)
An id can be passed for the textarea. By default one is randomly generated.
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "What is the nature of your medical emergency?"
},
name: "emergency-name",
id: "emergency-id"
} %>With margin bottom (preview)
The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to a margin bottom of 6 (30px).
<%= render "govuk_publishing_components/components/textarea", {
margin_bottom: 9,
label: {
text: "Can you provide more detail?"
},
name: "more-detail"
} %>Specific rows (preview)
Textarea with 10 rows
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "Can you provide more detail?"
},
name: "more-detail-rows",
rows: 10
} %>With hint (preview)
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "Can you provide more detail?"
},
name: "with-hint",
hint: "Please include as much information as possible."
} %>With error (preview)
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "Can you provide more detail?"
},
name: "more-detail-error",
error_message: "Please could you provide more detail"
} %>With error items (preview)
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "Can you provide more detail?"
},
name: "more-detail-error",
error_items: [
{
text: "Descriptive link to the question with an error 1",
href: "#example-error-1"
},
{
text: "Descriptive link to the question with an error 2",
href: "#example-error-2"
}
]
} %>With label as page heading (preview)
<%= render "govuk_publishing_components/components/textarea", {
label: {
is_page_heading: true,
heading_size: "xl",
text: "Can you provide more detail?"
},
hint: "Please include as much information as possible.",
name: "more-detail-error"
} %>With value (preview)
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "Can you provide more detail?"
},
name: "more-detail-value",
value: "More detail"
} %>With extra elements (preview)
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "How about a hint below?"
},
name: "more-elements"
} do %>
<div class="govuk-hint">Here's a hint</div>
<% end %>With maxlength (preview)
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "A textarea that doesn't allow many characters"
},
name: "maxlength",
value: "You can't type more",
maxlength: 19
} %>With aria attributes (preview)
Use describedby when the textarea is described by an element outside the component; for example, when used in conjunction with a contextual guidance.
The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.
<%= render "govuk_publishing_components/components/contextual_guidance", {
html_for: "contextual-guidance-id",
guidance_id: "contextual-guidance",
content: sanitize("<p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>")
} do %>
<%= render "govuk_publishing_components/components/textarea", {
id: "contextual-guidance-id",
label: {
text: "Title",
bold: true
},
name: "described",
rows: 2,
describedby: "contextual-guidance"
} %>
<% end %>
With data attributes (preview)
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "This textarea has a data attribute"
},
name: "with_data_attrbutes",
data: {
module: "some-awesome-module-here"
}
} %>With dir attribute (preview)
Allows the correct display of right to left languages.
By default the textarea element and the label both display text in a left to right direction.
When the right_to_left parameter of the textarea component is set to true all text desplays in a right to left direction.
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "Some textarea text that displays right to left with a label that displays in the same direction"
},
hint: "Some hint text that displays in the same text direction as the label",
error_message: "An error message that displays in the same text direction as the label",
name: "rtl-textarea-text",
value: "العربيَّة",
right_to_left: true
} %>With separate dir attributes for field and help text (preview)
Allows the correct display of right to left languages.
By default the textarea element and the label both display text in a left to right direction.
If the textarea field and the help text (label, hint and error messages) are required to display in different directions the right_to_left_help attribute can be set as false to override the right_to_left attribute.
<%= render "govuk_publishing_components/components/textarea", {
label: {
text: "Some textarea text that displays right to left with a label that displays left to right"
},
hint: "Some hint text that displays in the same text direction as the label",
error_message: "An error message that displays in the same text direction as the label",
name: "rtl-textarea-text",
value: "العربيَّة",
right_to_left: true,
right_to_left_help: false
} %>