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,
    "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 can be added directly after the other attributes e.g. autocomplete: "name"