Text areas are inputs that provide affordance to capture multiple lines of content from a user. There are two variations, one that relies on default markup and another that provides users with a counter when a maximum number of characters has been assigned.

Examples

Helper or instructional text for the input
Helper or instructional text for the input

Usage

Rules

  • Include matching for and id values unique to each label and input pair to associate the two
  • Use a text area when the length of the text input is expected to be larger than a few words
  • The visible maximum characters pattern (x of x characters remaining) relies on data attributes for behavior

Constraints

  • Use the rows and columns attributes to physically limit the size of the <textarea>
  • Use the maxlength attribute to limit the number of characters allowed
  • Only use a fieldset with legend to group associated inputs (e.g. multiple address inputs or credit card month/year inputs) or a set of radios or checkboxes. Some assistive tools will read the contents of the legend before each nested input to maintain context for a user.

Principles

  • Text areas let a user know you‘re expecting more information from them than a one line response

Accessibility

  • Always include .label-help text when an input requires explanation for expected formatting or error correction
  • When using .label-help you should use aria-describedby on the element that the helper text applies to
  • The textarea with maxlength and data attributes that displays a character counter automatically creates a screen reader-only element to relay the character count to screen reader users after a longer pause when adding, removing or pasting content within the input
  • An invalid input should include the aria-invalid="true" attribute

Class Names

form-group
Required

Use on the parent <div> or <fieldset> that surrounds the <label> and <input>
form-control
Required

Apply to the <textarea> element
form-group-spacer
Modifier

Use with .form-group to increase the space below the input
has-warning
Modifier

Use with the .form-group to flag the input as potentially invalid, it‘s recommended to include .label-help helper text to clarify the error
has-danger
Modifier

Use on the .form-group to flag the input as error, it‘s recommended to include .label-help helper text to clarify the error
  • Last updated May 1, 2019
  • Authorable - Yes
  • Core - Text Areas