Skip to main content

Textarea

Use the textarea component when you need to let users enter an amount of text that’s longer than a single line.

With label​

<div class="field">
  <div class="bcc-form-question">
    <label class="field__label field__label--block" for="description">Container that was missed</label>
  </div>
  <textarea id="description" class="field__input" name="description"></textarea>
</div>

With label and hint​

<div class="field">
  <div class="bcc-form-question">
    <label class="field__label field__label--block" for="description">What's the problem about?</label>
    <h6 class="field__instructions">Provide more details</h6>
  </div>
  <textarea id="description" class="field__input" name="description"></textarea>
</div>

With error​

Display an inline error when there's something wrong.

Make sure:

  • The form control has the aria-describedby attribute and references an associated error message
  • The associated error message has a unique ID

Remove the error state when the textarea is updated, to avoid confusing users.

To do this:

  • Remove the field--error class
  • Remove the <div> element with the class field__message field__message--error

Clear the textarea to reset the error state in this example.

You need to enter a description
<div class="field field--error">
  <div class="bcc-form-question">
    <label class="field__label field__label--block" for="description">Description</label>
  </div>
  <div class="drop drop--block">
    <textarea aria-describedby="description-error" required id="description" class="field__input" name="description"></textarea>
    <div id="description-error" class="field__message field__message--error">You need to enter a description</div>
  </div>
</div>