Text Area

Example

    <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 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>

<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>

    <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>

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

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

Usage guidelines

Best practices:

1. Provide additional instructions or hint text to guide users on what to enter.
2. If the hint text is insufficient to guide users, you can use placeholder text to provide examples of the expected input. However, placeholders should not replace labels.
3. Ensure the placeholder text has sufficient colour contrast to be readable.
4. If there is a character limit, do inform users about it.
5. Use a readable font size and line height to enhance legibility.

Text area should be used when:

1. Users are required to enter more than a line of text.

Text area should not be used when:

1. Questions are too complex. 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 character count
If there is a character limit, inform users about it.

Labels should be placed outside of the text field
Labels should be above or next to the text field. This ensures a clear association between the label and the input field, and is also crucial for screen readers and other assistive technologies.

Do not rely solely on placeholder text to convey critical information
Placeholder text disappears when a text input is filled in, which can make it easy for users to forget the guidance or format instructions, leading to errors or confusion.

Behaviour
Users should be able to click anywhere within the text area to focus. On focus, users can type directly into the text area. Any placeholder text in the field will be replaced when the user begins typing.

Accessibility guidelines

Aria attributes

1. Use the label element to associate text with form elements explicitly.
2. The for attribute of the label must exactly match the id of the form control.

Keyboard accessibility

1. Tab to bring focus to the text area.

Focus indicator

1. Ensure the focus indicator is highly visible. Use a distinct colour that contrasts well with the surrounding elements. Avoid relying on colour alone; consider adding a border or shadow to enhance visibility so that it is accessible to all users, including those with visual impairments.
2. The focus indicator should encompass the entire text area without altering its size or shape. It should be clear that the focus is on the text area, not another part of the UI.