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

 
<div class="sgds form-group">
    <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>
</div>

                

Hover

Label
0/200

 
<div class="sgds form-group">
    <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>
</div>

                

Error

Label
0/200
Error message

 
<div class="sgds form-group 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>
</div>

                

Disabled

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

 
<div class="sgds form-group">
    <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>
</div>

                

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.

Home


Previous version 2.1.0