Alpha

This is an alpha release of our documentation site. View the roadmap.

Textarea

On this page

Examples

Default

Open example in a new tab 
<div class="cads-form-field">
  <div class="cads-form-field__content">
    <label class="cads-form-field__label" id="example-textarea-basic-label" for="example-textarea-basic-input">
      Example textarea
    </label>
    <textarea class="cads-textarea" id="example-textarea-basic-input" name="example-textarea-basic" aria-required="true" aria-invalid="false" rows="8">
</textarea>
  </div>
</div>
<%= render(CitizensAdviceComponents::Textarea.new(
  name: "example-textarea-basic",
  label: "Example textarea",
))%>

Optional

Open example in a new tab 
<div class="cads-form-field">
  <div class="cads-form-field__content">
    <label class="cads-form-field__label" id="example-textarea-optional-label" for="example-textarea-optional-input">
      Example textarea
      <span class="cads-form-field__optional">(optional)</span>
    </label>
    <textarea class="cads-textarea" id="example-textarea-optional-input" name="example-textarea-optional" aria-required="false" aria-invalid="false" rows="8">
</textarea>
  </div>
</div>
<%= render(CitizensAdviceComponents::Textarea.new(
  name: "example-textarea-optional",
  label: "Example textarea",
  options: {
    optional: true
  }
))%>

With hint

Open example in a new tab

Example hint text

<div class="cads-form-field">
  <div class="cads-form-field__content">
    <label class="cads-form-field__label" id="example-textarea-hint-label" for="example-textarea-hint-input">
      Example textarea (with hint)
    </label>
    <p class="cads-form-field__hint" id="example-textarea-hint-hint" data-testid="hint-message">Example hint text</p>
    <textarea class="cads-textarea" id="example-textarea-hint-input" name="example-textarea-hint" aria-required="true" aria-invalid="false" aria-describedby="example-textarea-hint-hint" rows="8">
</textarea>
  </div>
</div>
<%= render(CitizensAdviceComponents::Textarea.new(
  name: "example-textarea-hint",
  label: "Example textarea (with hint)",
  options: {
    hint: "Example hint text"
  }
))%>

With error message

Open example in a new tab

Example error message 

<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="example-textarea-with-error-message-label" for="example-textarea-with-error-message-input">
      Example textarea
    </label>
    <p class="cads-form-field__error-message" id="example-textarea-with-error-message-error" data-testid="error-message">
      Example error message
    </p>
    <textarea class="cads-textarea" id="example-textarea-with-error-message-input" name="example-textarea-with-error-message" aria-required="true" aria-invalid="true" aria-describedby="example-textarea-with-error-message-error" rows="8">
</textarea>
  </div>
</div>
<%= render(CitizensAdviceComponents::Textarea.new(
  name: "example-textarea-with-error-message",
  label: "Example textarea",
  options: {
    error_message: "Example error message"
  }
))%>

With value

Open example in a new tab 
<div class="cads-form-field">
  <div class="cads-form-field__content">
    <label class="cads-form-field__label" id="example-textarea-with-value-label" for="example-textarea-with-value-input">
      Example textarea
    </label>
    <textarea class="cads-textarea" id="example-textarea-with-value-input" name="example-textarea-with-value" aria-required="true" aria-invalid="false" rows="8">
Amet parturient platea augue natoque vitae sem parturient senectus nisi sit nascetur penatibus neque scelerisque rutrum nisl amet odio adipiscing.Ad consectetur quam taciti faucibus etiam parturient a sed.</textarea>
  </div>
</div>
<%= render(CitizensAdviceComponents::Textarea.new(
  name: "example-textarea-with-value",
  label: "Example textarea",
  options: {
    value: "Amet parturient platea augue natoque vitae sem parturient senectus nisi sit nascetur penatibus neque scelerisque rutrum nisl amet odio adipiscing.Ad consectetur quam taciti faucibus etiam parturient a sed."
  }
))%>

With custom id

By default the id is based on the name. This can be customised by passing an id argument.

Open example in a new tab 
<div class="cads-form-field">
  <div class="cads-form-field__content">
    <label class="cads-form-field__label" id="test-id-label" for="test-id-input">
      Example textarea
    </label>
    <textarea class="cads-textarea" id="test-id-input" name="example-textarea-basic[test]" aria-required="true" aria-invalid="false" rows="8">
</textarea>
  </div>
</div>
<%= render(CitizensAdviceComponents::Textarea.new(
  name: "example-textarea-basic[test]",
  id: "test-id",
  label: "Example textarea",
))%>

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= 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[: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" }