Text Area
Text areas allow for the collection of input longer than a single line.
Example
Default text area
row class
<div class="cgds 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
<div class="cgds 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
<div class="cgds 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
disabled class if you want to disable the text area
<div class="cgds 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
- Label: Inform users of what data should be put into the field, labels must always be outside the text field.
- Word count (situational): Serves to let users know the max number of characters is allowed and when they have gone over.
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 user's answers.
Labels are outside the text field
Labels should be above or next to the text field. This makes it clear that the user is able to input an 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 a placeholder text.
