Textarea

On this page

Examples

Default

Open example in a new tab 
<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content"><label class="cads-form-field__label" id="forms_text_area_text_area-label" for="forms_text_area_text_area-input">Example textarea <span class="cads-form-field__optional">(optional)</span></label>
      <textarea class="cads-textarea" id="forms_text_area_text_area-input" rows="8" aria-required="false" aria-invalid="false" name="forms_text_area[text_area]">
</textarea>
    </div>
  </div>
</form>

<%= form_with model: Forms::TextArea.new, url: "/" do |form| %>
  <%= form.cads_text_area(:text_area) %>
<% end %>

With hint

Open example in a new tab

Example hint text

<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content"><label class="cads-form-field__label" id="forms_text_area_text_area-label" for="forms_text_area_text_area-input">Example textarea <span class="cads-form-field__optional">(optional)</span></label>
      <p class="cads-form-field__hint" id="forms_text_area_text_area-hint">Example hint text</p>
      <textarea class="cads-textarea" id="forms_text_area_text_area-input" rows="8" aria-required="false" aria-invalid="false" aria-describedby="forms_text_area_text_area-hint" name="forms_text_area[text_area]">
</textarea>
    </div>
  </div>
</form>

<%= form_with model: Forms::TextArea.new, url: "/" do |form| %>
  <%= form.cads_text_area(:text_area, hint: "Example hint text") %>
<% end %>

With error message

Open example in a new tab

Example error message

<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field cads-form-field--has-error">
    <div class="cads-form-field__error-marker"></div>
    <div class="cads-form-field__content"><label class="cads-form-field__label" id="forms_text_area_text_area_required-label" for="forms_text_area_text_area_required-input">Example textarea </label>
      <p class="cads-form-field__error-message" id="forms_text_area_text_area_required-error">Example error message</p>
      <textarea class="cads-textarea" id="forms_text_area_text_area_required-input" rows="8" aria-required="true" aria-invalid="true" aria-describedby="forms_text_area_text_area_required-error" name="forms_text_area[text_area_required]">
</textarea>
    </div>
  </div>
</form>

<%= form_with model: Forms::TextArea.invalid_example, url: "/" do |form| %>
  <%= form.cads_text_area(:text_area_required, required: true) %>
<% end %>

With custom rows

Open example in a new tab 
<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content"><label class="cads-form-field__label" id="forms_text_area_text_area_rows-label" for="forms_text_area_text_area_rows-input">Example textarea with custom rows <span class="cads-form-field__optional">(optional)</span></label>
      <textarea class="cads-textarea" id="forms_text_area_text_area_rows-input" rows="5" aria-required="false" aria-invalid="false" name="forms_text_area[text_area_rows]">
</textarea>
    </div>
  </div>
</form>

<%= form_with model: Forms::TextArea.valid_example, url: "/" do |form| %>
  <%= form.cads_text_area(:text_area_rows, rows: 5) %>
<% end %>

Page heading

Open example in a new tab

Example hint text

<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content">
      <h1 class="cads-page-title"><label id="forms_text_area_text_area_page_heading-label" for="forms_text_area_text_area_page_heading-input">Example text area with page heading</label></h1>
      <p class="cads-form-field__hint" id="forms_text_area_text_area_page_heading-hint">Example hint text</p>
      <textarea class="cads-textarea" id="forms_text_area_text_area_page_heading-input" rows="8" aria-required="true" aria-invalid="false" aria-describedby="forms_text_area_text_area_page_heading-hint" name="forms_text_area[text_area_page_heading]">
</textarea>
    </div>
  </div>
</form>

<%= form_with model: Forms::TextArea.new, url: "/" do |form| %>
  <%= form.cads_text_area(
    :text_area_page_heading,
    hint: "Example hint text",
    required: true,
    page_heading: true
  ) %>
<% end %>

Using with Rails

When using with Rails we recommend using the form builder method provided by CitizensAdviceComponents::FormBuilder.

cads_text_area(attribute, **options)

The method works similarly to the default text_area helper.

<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_text_area(:example) %>
<% end %>

With options:

<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_text_area(
    :example,
    hint: "Example hint",
    required: true,
    rows: 5,
    additional_attributes: { "data-testid": "example" }
  ) %>
<% end %>

The method accepts the following optional parameters:

  • :label - The text for the label associated with the input. Defaults to using translations.
  • :hint - Hint text for the input
  • :required - Boolean indicating the field is optional (i.e. not required)
  • :rows - The number of rows for the textarea. Defaults to 8
  • :page_heading - Wraps the <label> in a <h1>
  • :additional_attributes - Hash of additional attributes rendered onto the input, e.g. { autocomplete: "name" }

View component version

We also provide an older view component version of the component

<%= render CitizensAdviceComponents::Textarea.new(
  name: "my-textarea",
  label: "My textarea",
  rows: 12,
  options: {
    hint: "Hint text",
    error_message: "Error message",
    optional: true,
    value: "Input value",
    additional_attributes: {
      "data-test-id": "test"
    }
  }
) %>
Component arguments
Argument Description
Argument name Description Required, field name
Argument id Description Optional, allows customising the id. By default the id is autogenerated based on the name
Argument label Description Required, the text for the label associated with the input
Argument rows Description Optional, the number of rows for the textarea. Defaults to 8
Argument options Description Optional, a hash with one or more of the following values:
Argument options[:page_heading] Description → Optional, boolean indicating the field label is a page heading
Argument options[:hint] Description → Optional, hint text for the input
Argument options[:error_message] Description → Optional, an error message for the input
Argument options[:optional] Description → Optional, boolean indicating the field is optional (i.e. not required)
Argument options[:value] Description → Optional, the value of the input
Argument options[:additional_attributes] Description Optional, a hash of additional attributes rendered onto the input, eg { autocomplete: "name" }