Component
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)
Please include as much information as possible.
<%= 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)
Please include as much information as possible.
<%= 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)
Here's a hint
<%= 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/textarea", {
label: {
text: "Title",
bold: true
},
name: "described",
rows: 2,
describedby: "contextual-guidance"
} %>
<p class="govuk-body" id="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.</p>