Overview
Overview
A text area lets users enter long form text which spans over multiple lines. Overflow text wraps onto a new line and expands the text area.
As a multi-line input field, a text area allows users to enter longer blocks of text, such as comments, descriptions, or messages. Text areas have more space than text input and may include scrollbars to navigate through the text.
Text area
Vanilla example
Palette
Hint text
Hint text
<div class="row qld__row-gap-component">
<div class="co-xs-12 col-lg-4">
<!-- Default style textarea field -->
<!-- Label for the textarea element -->
<label for="textarea-example" class="qld__label"><abbr title="required">*</abbr>Text area label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span class="qld__hint-text" id="textarea-example-hint">Hint text</span>
<!-- Textarea field -->
<textarea id="textarea-example" class="qld__text-input qld__text-input--block" aria-required="true" aria-describedby="textarea-example-hint"></textarea>
</div>
<div class="co-xs-12 col-lg-4 qld__form-style-filled">
<!-- Filled style textarea field -->
<!-- Label for the textarea element -->
<label for="textarea-filled-example" class="qld__label">Text area label<span class="qld__label--optional"> (Optional)</span></label>
<!-- Hint text associated via 'aria-describedby' -->
<span class="qld__hint-text" id="textarea-filled-example-hint">Hint text</span>
<!-- Textarea field -->
<textarea id="textarea-filled-example" class="qld__text-input qld__text-input--block" aria-describedby="textarea-filled-example-hint"></textarea>
</div>
</div>
Valid and invalid states
Vanilla example
Palette
Error message
Error message
Hint text
Success message
Hint text
Success message
<div class="row qld__row-gap-component">
<div class="co-xs-12 col-lg-4">
<!-- Example: Invalid textarea field -->
<!-- Label for the textarea element -->
<label for="textarea-invalid-example" class="qld__label">Text area label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span id="textarea-invalid-example-message" class="qld__input--error"><svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Error: ">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-error">
</svg>Error message</span>
<!-- Textarea field -->
<textarea id="textarea-invalid-example" placeholder="placeholder text" class="qld__text-input qld__text-input--block qld__text-input--error" aria-describedby="textarea-invalid-example-message"></textarea>
</div>
<div class="qld__form-style-filled co-xs-12 col-lg-4">
<!-- Example: Invalid field filled style -->
<!-- Label for the textarea element -->
<label for="textarea-filled-invalid-example" class="qld__label">Text area label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span id="textarea-filled-invalid-example-message" class="qld__input--error"><svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Error: ">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-error">
</svg>Error message</span>
<!-- Textarea field -->
<textarea id="textarea-filled-invalid-example" placeholder="placeholder text" class="qld__text-input qld__text-input--block qld__text-input--error" aria-describedby="textarea-filled-invalid-example-message"></textarea>
</div>
</div>
<div class="row qld__row-gap-component qld__margin-t-component">
<div class="co-xs-12 col-lg-4" >
<!-- Example: valid field -->
<!-- Label for the textarea element -->
<label for="textarea-valid-example" class="qld__label">Text area label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span class="textarea-valid-example-hint" id="text-area-hint-success">Hint text</span>
<!-- Success message text associated via 'aria-describedby' -->
<span id="textarea-valid-message" class="qld__input--success"> <svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Success: ">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-success">
</svg>Success message</span>
<textarea id="textarea-valid-example" placeholder="placeholder text" class="qld__text-input qld__text-input--block qld__text-input--valid" aria-describedby="textarea-valid-example-hint textarea-valid-message"></textarea>
</div>
<div class="qld__form-style-filled co-xs-12 col-lg-4">
<!-- Example: valid field filled style -->
<!-- Label for the textarea element -->
<label for="textarea-filled-valid-example" class="qld__label">Text area label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span class="textarea-filled-valid-example-hint" id="text-area-hint-success-filled">Hint text</span>
<!-- Success message text associated via 'aria-describedby' -->
<span id="textarea-filled-valid-example-message" class="qld__input--success"> <svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Success: ">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-success">
</svg>Success message</span>
<!-- Textarea field -->
<textarea id="textarea-filled-valid-example" placeholder="placeholder text" class="qld__text-input qld__text-input--block qld__text-input--valid" aria-describedby="textarea-filled-valid-example-hint textarea-filled-valid-example-message"></textarea>
</div>
</div>
Disabled
Vanilla example
Palette
Hint text
Hint text
<div class="row qld__row-gap-component">
<div class="co-xs-12 col-lg-4">
<!-- Disabled default style textarea field -->
<!-- Label for the textarea element -->
<label for="disabled-textarea-example" class="qld__label">Text area label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span class="qld__hint-text" id="disabled-textarea-example-hint">Hint text</span>
<!-- Textarea field -->
<textarea id="disabled-textarea-example" class="qld__text-input qld__text-input--block" aria-required="true" aria-describedby="disabled-textarea-example-hint" disabled></textarea>
</div>
<div class="co-xs-12 col-lg-4 qld__form-style-filled">
<!-- Disabled filled style textarea field -->
<!-- Label for the textarea element -->
<label for="disabled-textarea-filled-example" class="qld__label">Text area label</label>
<!-- Hint text associated via 'aria-describedby' -->
<span class="qld__hint-text" id="disabled-textarea-filled-example-hint">Hint text</span>
<!-- Textarea field -->
<textarea id="disabled-textarea-filled-example" class="qld__text-input qld__text-input--block" aria-describedby="disabled-textarea-filled-example-hint" disabled></textarea>
</div>
</div>
Usage guidelines
Below are general guidelines for text area fields, please see our form component for a more complete guide on how to structure and layout your forms. It's also recommended that you review the Australian Government style manual for more detailed advice on form content.
When to use
- When you need users to enter a large amount of text: A text area is ideal when users need to enter a large amount of text, such as in a comment box or message field.
- When you need users to enter formatted text: If you need users to enter formatted text, such as bold or italicised text, a text area is a good choice.
- When you need to collect user feedback: A text area is an effective way to collect user feedback, as it allows users to provide detailed comments or suggestions.
When not to use
- When you need users to enter a small amount of text: If you only need users to enter a small amount of text, such as a name or email address, a text area may be too large and take up unnecessary space on the page.
- When you need users to enter specific types of information: If you need users to enter specific types of information, such as a date or phone number, a text area may not be the best choice. Instead, use a more specific input field, such as a date picker or phone number field.
- When you need to limit the amount of text users can enter: If you need to limit the amount of text users can enter, such as in a Twitter post or comment field, a text area may not be the best choice. Instead, use a character limit or other form of input validation.