Textarea

The textarea component represents an <textarea> element with an explicitly associated <label> element. The component also supports additional information and/or error messages associated with the form control.

Overall usage

Used where multi-line user input is required.
The hidden attribute can be applied to the <label> element but only in specific circumstances.
The textarea--required attribute should be added to the parent container for all instances were the form control is required. In these instances, the required and
When errors occur, the textarea--invalid attribute should be injected into the parent container.
The textarea--disabled attribute can be added to the parent container if the form control needs to be disabled.

Accessibility

The <label> element should only be hidden in cases where there is no other choices available, and only when the form is extremely simple and its purpose is clear to sighted users.
For required fields, the required attributes must be applied to <textarea> element to inform Assistive Technologies.
The static, focus and hover states of the <textarea> element should be defined
There must be a clearly visible focus state, and the method should be consistent across all focusable elements.

.textarea

Used to display a <textarea> form control and an explicitly associated <label>.

Label for textarea

<div class="textarea">
  <label class="textarea__label" for="example">
    <span class="textarea__content">Label for textarea</span>
    <textarea class="textarea__control" id="example" rows="5"></textarea>
  </label>
</div>

A help mesage can be placed directly after the <label> element using the message--help class.

Label for textarea Help Message

<div class="textarea">
  <label class="textarea__label" for="example">
    <span class="textarea__content">Label for textarea</span>
    <span class="message--help">Help Message</span>
    <textarea class="textarea__control" id="example" rows="5"></textarea>
  </label>
</div>

A required flag can be placed inside the <label> element using the message--required class. The required boolean attribute must be added to the <textarea>.

Label for textarea (Required)

<div class="textarea">
  <label class="textarea__label" for="example">
    <span class="textarea__content">Label for textarea <span class="message--required">(Required)</span></span>
    <textarea class="textarea__control" id="example" rows="5" required></textarea>
  </label>
</div>

.textarea--hidden

Used to display a <textarea> form control and an explicitly associated <label>. The <label> is not displayed on-screen, but is still available to assistive technologies.

Label for textarea

<div class="textarea textarea--hidden">
  <label class="textarea__label" for="example">
    <span class="textarea__content">Label for textarea</span>
    <textarea class="textarea__control" id="example" rows="5"></textarea>
  </label>
</div>

.textarea--invalid

Used to inform the user that the form control has not been filled-in correctly.

Label for textarea (Required) Error Error message

<div class="textarea textarea--invalid">
  <label class="textarea__label" for="example">
    <span class="textarea__content">Label for textarea <span class="message--required">(Required)</span></span>
    <textarea class="textarea__control" id="example" rows="5"></textarea>
    <!-- Error message -->
    <span class="message--error">
      <span class="fas fa-times">
        <span class="u-hidden">Error</span>
      </span>
      Error message
    </span>
  </label>
</div>

.textarea--disabled

Used to present a disabled <textarea> element and label. The disabled boolean attribute must be added to the <textarea>.

Disabled textarea

<div class="textarea textarea--disabled">
  <label class="textarea__label" for="example">
    <span class="textarea__content">Disabled textarea</span>
    <textarea class="textarea__control" id="example" rows="5" disabled></textarea>
  </label>
</div>