Textarea

Overview

The text area form field can be resized by the end user, and is designed as a free text input field. It is only for use within the form component. Similar to the other form fields, it can be in either a default, focus, disabled or error state.

Examples

Static variation

Example
External Link
This field is required
This field is required 
<div class="textarea">
  <label for="formTextarea-1" class="textarea__label">Textarea input</label>
  <textarea name="" id="formTextarea-1" class="textarea__field" cols="30" rows="5"></textarea>
  <div class="form__error-message">
    This field is required
  </div>
</div>
<div class="textarea">
  <label for="formTextarea-2" class="textarea__label is-invalid">Textarea input</label>
  <textarea name="" id="formTextarea-2" class="textarea__field is-invalid" cols="30" rows="5" required></textarea>
  <div class="form__error-message is-visible">
    This field is required
  </div>
</div>

Usage guidelines

Dos Donts
do iconDo give the field extra content with a helpful label, i.e: 'Additional information'
do-not iconDon't use the Textarea form field if the user only needs to input simple and short data. Instead use the Input form field.
do-not iconDon't use the Textarea form field if the user needs to input data from a range of options. Instead, use the Dropdown Select form field.

Implementation guidelines

Name Attribute Description
Required required Requires a value to be selected - cannot be left blank. Apply to the textarea element.