1. Components
  2. Form controls

Textarea field

A multiple-line empty form field in which the user can input lengthy text.

Default textarea field orc-c-field

A multiple-line empty form field in which the user can input lengthy text.

Textarea field error has-error

Lets the user know that their input text is invalid and can’t be registered in our system.

Textarea field valid is-valid

Lets the user know that their input text is valid and was registered.

Disabled textarea field is-disabled

Shows that the user can’t interact with the text field.

  • 

    <div class="orc-c-field  orc-js-field">

  <label for="" class="orc-c-field__label">Label</label>

  <div class="orc-c-field__body">

    <textarea class="orc-c-textarea " id="" placeholder="Placeholder" value="" rows="5"></textarea>

  </div>
  <!-- end orc-c-field__body -->

  <div class="orc-c-field__note orc-js-field-note">This is a note about the field</div>

</div>
<!-- end orc-c-field -->
    

  • 

    <div class="orc-c-field orc-has-error orc-js-field">

  <label for="" class="orc-c-field__label">Label</label>

  <div class="orc-c-field__body">

    <textarea class="orc-c-textarea " id="" placeholder="Placeholder" value="" rows="5"></textarea>

  </div>
  <!-- end orc-c-field__body -->

  <div class="orc-c-field__note orc-js-field-note">This is an invalid message</div>

</div>
<!-- end orc-c-field -->
    

  • 

    <div class="orc-c-field orc-is-valid orc-js-field">

  <label for="" class="orc-c-field__label">Label</label>

  <div class="orc-c-field__body">

    <textarea class="orc-c-textarea " id="" placeholder="Placeholder" value="" rows="5"></textarea>

  </div>
  <!-- end orc-c-field__body -->

  <div class="orc-c-field__note orc-js-field-note">This is a valid message</div>

</div>
<!-- end orc-c-field -->
    

  • 

    <div class="orc-c-field orc-is-disabled orc-js-field">

  <label for="" class="orc-c-field__label">Label</label>

  <div class="orc-c-field__body">

    <textarea class="orc-c-textarea " id="" placeholder="Placeholder" value="" rows="5" disabled></textarea>

  </div>
  <!-- end orc-c-field__body -->

  <div class="orc-c-field__note orc-js-field-note">This is a disabled message</div>

</div>
<!-- end orc-c-field -->

Usage

When to use

When asking the user to provide a free-form answer that may run to two or more lines.

When to consider an alternative

When the answer is likely short (e.g. a zip code), a text field provides a shorter form field.

Class Name Description 
orc-c-field
Required

Apply to the textarea field’s containing HTML element. This contains the field label, field body, and field note.

 
orc-js-field
JS

Added to orc-c-field so that JavaScript can target this element.

 
has-error
Modifier

Added to orc-c-field to show that the textarea field has an error.

 
is-valid
Modifier

Added to orc-c-field to show that the textarea field is valid.

 
is-disabled
Modifier

Added to orc-c-field to show that the textarea field is disabled. The input also needs to contain a disabled attribute to turn off any typing within the input.

 
orc-c-field__label
Required

Word or short phrase applied to an <label> element that labels the contents of the orc-c-field__body

 
orc-c-field__body
Required

Container used to house the textarea input

 
orc-c-textarea
Required

Actual textarea input of the field. This is applied to a <textarea> element.

 
orc-c-field__note

Short excerpt that adds additional directions or context to the textarea field. orc-js-field-note is applied for HTML form validation to print out a message when an error occurs.