Text Area

Text areas allow for the collection of input longer than a single line.

Example

Default text area

To add more rows to the text area, increase the number in the row class
Label
0/200

HTML React Web Component
    <div class="d-flex justify-content-between">
        <div for="exampleFormControlTextarea1" class="form-label">Label</div>
        <div class="form-text">0/200</div>
    </div>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="This is text that has been filled in"></textarea>
View on React storybook View on Web component storybook

Hover

Label
0/200

HTML React Web Component
    <div class="d-flex justify-content-between">
        <div for="exampleFormControlTextarea1" class="form-label">Label</div>
        <div class="form-text">0/200</div>
    </div>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="This is text that has been filled in" autofocus></textarea>
View on React storybook View on Web component storybook

Error

Label
0/200
Error message

HTML React Web Component
<form class="was-validated">
    <div class="d-flex justify-content-between">
        <div for="exampleFormControlTextarea1" class="form-label">Label</div>
        <div class="form-text">0/200</div>
    </div>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="This is text that has been filled in" required></textarea>
    <div class="invalid-feedback">Error message</div>
</form>
View on React storybook View on Web component storybook

Disabled

Add in the disabled class if you want to disable the text area
Label
0/200

HTML React Web Component
    <div class="d-flex justify-content-between">
        <div for="exampleFormControlTextarea1" class="form-label">Label</div>
        <div class="form-text">0/200</div>
    </div>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="This is text that has been filled in" disabled></textarea>
View on React storybook View on Web component storybook

Anatomy

Text Area Anatomy
  1. Label: Inform users of what data should be put into the field, labels must always be outside of the text field.
  2. Word count (situational): Serves to let users know the max number of characters is allowed and when they have gone over.

Spacing

Text Area Spacing

Within the text area
Ensure that there is a min of 16px horizontal spacing and 8px vertical spacing within the text area.

Usage guidelines

Text area should be used:

  • When users are required to enter more than a line of text.

Text area should not be used:

  • When have complex or too many open-ended answers. We recommend that you break your questions up into a series of simpler questions instead. For example, consider using the checkbox component if you want users to give multiple answers from a predetermined set of options.

Usability guidelines

Use word count
Do use word count if you want to limit a users answers.

Labels are outside of the text field
Labels should be above or next to the text field. This makes it clear that the user is able to input a answer.

Avoid placeholder text
Placeholder text disappears when a text input is filled in. If the placeholder text is not visible, users will no longer have the text when they need to review their entries. Use hint text instead of placeholder text.


Last updated 22 November 2023
Home


Latest version 2.2.0