Textarea

The Textarea component is used to create multi-line text input fields for forms. It includes built-in support for labels and error states.

Attributes

Attribute	Description
`error`	Sets an error state. Accepts a boolean, defaults to false.
`field-id`	Sets a value in the id and for attributes to pair labels and inputs. Accepts a string, defaults to null.
`classes`	Adds additional classes. Accepts a string of classes separated by spaces, defaults to null.
`label`	The label text. Accepts a string, defaults to null.
`message`	An error message. Accepts a string, defaults to null.
`required`	Specifies when a field is required. Accepts a boolean, defaults to null.

Accessibility Guidelines

All textareas must have an associated label element with a matching for attribute
The for attribute must match the id of the textarea element
Required textareas should use the required attribute
Textareas with errors should include aria-invalid="true" and aria-describedby attributes pointing to the error message

Textarea

The standard textarea field with a label positioned above the textarea. The textarea uses the cmp-form-field__textarea class. Error states can be displayed with a red border and error message below the field by adding the cmp-form-field__textarea--error class to the textarea.

Textarea

This is an error message.

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <label for="textarea-field" class="cmp-form-label">Textarea</label>
  </div>
  <textarea
    id="textarea-field"
    class="cmp-form-field__textarea"
    required
    rows="4"
  ></textarea>
</div>
<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <label
      for="textarea-field-error"
      class="cmp-form-label cmp-form-label--error"
    >
      Textarea
    </label>
  </div>
  <textarea
    id="textarea-field-error"
    class="cmp-form-field__textarea cmp-form-field__textarea--error"
    required
    rows="4"
    aria-describedby="error-message-textarea-1"
    aria-invalid="true"
  ></textarea>
  <p id="error-message-textarea-1" class="cmp-form__error-message">
    This is an error message.
  </p>
</div>