Text area

Allows users to enter multiple lines of text.

Examples

Usage

Use a text area when the user needs to enter more than a single line of text, such as:

answering an open-ended question
writing comments or descriptions in a form

Do:

use a text area for multi-line input
include a clear, visible label describing what the user should enter
show the character limit if there is one
let users know how many characters they have left (if this is relevant and possible)

Avoid:

using a text area for short, single-line input – instead use a text box
using placeholder text because it may not work with assistive technologies, can fail colour contrast checks, and might be mistaken for pre-filled content

References

W3C
Placeholder research

W3C
Form instructions

Please correct the errors and try again.

Required fields are marked with an asterisk

Text area

Copy


                <turas-text-area asp-for="TextAreaBasic" />

Copy


                <div class="form-group form-text-area "><label class="control-label   " for="TextAreaBasic">Text area</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" id="TextAreaBasic" name="TextAreaBasic">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaBasic" data-valmsg-replace="true"></span>
</div>
</div>

Text area required

Copy


                <turas-text-area asp-for="TextAreaBasicRequired" />

Copy


                <div class="form-group form-text-area "><label class="control-label requiredFieldMarker  " for="TextAreaBasicRequired">Text area required</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" aria-required="true" data-val="true" data-val-required="The Text area required field is required." id="TextAreaBasicRequired" name="TextAreaBasicRequired">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaBasicRequired" data-valmsg-replace="true"></span>
</div>
</div>

Text area guidance text

I am some guidance text

Copy


                <turas-text-area asp-for="TextAreaWithGuidanceText" guidance-text="I am some guidance text" />

Copy


                <div class="form-group form-text-area "><label class="control-label   " for="TextAreaWithGuidanceText">Text area guidance text</label>
<div class="form-field-guidance-text">I am some guidance text</div>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" id="TextAreaWithGuidanceText" name="TextAreaWithGuidanceText">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaWithGuidanceText" data-valmsg-replace="true"></span>
</div>
</div>

Text area guidance text accordion

A paragraph.

List item
List item
List item

Copy


                <turas-text-area asp-for="TextAreaWithGuidanceTextAccordion">
                    <turas-form-guidance collapses>
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                    </turas-form-guidance>
                </turas-text-area>

Copy


                <div class="form-group form-text-area "><label class="control-label   " for="TextAreaWithGuidanceTextAccordion">Text area guidance text accordion</label>
<div class="turas-form-guidance-collapse">
            <button class="turas-form-guidance-collapse-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-60ef34ca-41fa-41b0-b694-704f7f13324a" aria-expanded="false" aria-controls="collapse-60ef34ca-41fa-41b0-b694-704f7f13324a"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-60ef34ca-41fa-41b0-b694-704f7f13324a">   
                <div class="form-field-guidance-text"><span class=""></span>
                    
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                       
                </div>
            </div></div>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" id="TextAreaWithGuidanceTextAccordion" name="TextAreaWithGuidanceTextAccordion">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaWithGuidanceTextAccordion" data-valmsg-replace="true"></span>
</div>
</div>

Text area form field width

Copy


                <turas-text-area asp-for="TextAreaWithColumnClasses" field-column-widths="col-md-4" />

Copy


                <div class="form-group form-text-area "><label class="control-label requiredFieldMarker  " for="TextAreaWithColumnClasses">Text area form field width</label>
<div class="row">
<div class="col-md-4">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" aria-required="true" data-val="true" data-val-required="The Text area form field width field is required." id="TextAreaWithColumnClasses" name="TextAreaWithColumnClasses">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaWithColumnClasses" data-valmsg-replace="true"></span>
</div>
</div>

Text area additional classes

Copy


                <turas-text-area asp-for="TextAreaAdditionalClasses" additional-classes="mt-50" />

Copy


                <div class="form-group form-text-area mt-50"><label class="control-label   " for="TextAreaAdditionalClasses">Text area additional classes</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" id="TextAreaAdditionalClasses" name="TextAreaAdditionalClasses">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaAdditionalClasses" data-valmsg-replace="true"></span>
</div>
</div>

Text area in a row

Copy


                <div class="row">
                    <div class="col-md-4">
                        <turas-text-area asp-for="TextAreaInRowOne" />
                    </div>
                    <div class="col-md-4">
                        <turas-text-area asp-for="TextAreaInRowTwo" />
                    </div>
                    <div class="col-md-4">
                        <turas-text-area asp-for="TextAreaInRowThree" />
                    </div>
                </div>

Copy


                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group form-text-area "><label class="control-label   " for="TextAreaInRowOne">Text area in a row</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" id="TextAreaInRowOne" name="TextAreaInRowOne">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaInRowOne" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-text-area "><label class="control-label   " for="TextAreaInRowTwo">Text area in a row</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" id="TextAreaInRowTwo" name="TextAreaInRowTwo">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaInRowTwo" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-text-area "><label class="control-label   " for="TextAreaInRowThree">Text area in a row</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" id="TextAreaInRowThree" name="TextAreaInRowThree">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaInRowThree" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                </div>

Text area in a row required

Copy


                <div class="row">
                    <div class="col-md-4">
                        <turas-text-area asp-for="TextAreaInRowOneRequired" />
                    </div>
                    <div class="col-md-4">
                        <turas-text-area asp-for="TextAreaInRowTwoRequired" />
                    </div>
                    <div class="col-md-4">
                        <turas-text-area asp-for="TextAreaInRowThreeRequired" />
                    </div>
                </div>

Copy


                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group form-text-area "><label class="control-label requiredFieldMarker  " for="TextAreaInRowOneRequired">Text area in a row required</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" aria-required="true" data-val="true" data-val-required="The Text area in a row required field is required." id="TextAreaInRowOneRequired" name="TextAreaInRowOneRequired">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaInRowOneRequired" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-text-area "><label class="control-label requiredFieldMarker  " for="TextAreaInRowTwoRequired">Text area in a row required</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" aria-required="true" data-val="true" data-val-required="The Text area in a row required field is required." id="TextAreaInRowTwoRequired" name="TextAreaInRowTwoRequired">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaInRowTwoRequired" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-text-area "><label class="control-label requiredFieldMarker  " for="TextAreaInRowThreeRequired">Text area in a row required</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" aria-required="true" data-val="true" data-val-required="The Text area in a row required field is required." id="TextAreaInRowThreeRequired" name="TextAreaInRowThreeRequired">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaInRowThreeRequired" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                </div>

Text area hide validation message

Copy


                <turas-text-area asp-for="TextAreaBasicRequiredHideValidationMessage" hide-validation-message />

Copy


                <div class="form-group form-text-area "><label class="control-label requiredFieldMarker  " for="TextAreaBasicRequiredHideValidationMessage">Text area hide validation message</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" aria-required="true" data-val="true" data-val-required="The Text area hide validation message field is required." id="TextAreaBasicRequiredHideValidationMessage" name="TextAreaBasicRequiredHideValidationMessage">
</textarea>
</div>

</div>
</div>

Text area readonly

I am some readonly text

Copy


                <turas-text-area asp-for="TextAreaReadOnly" readonly />

Copy


                <div class="form-group form-text-area "><label class="control-label   " for="TextAreaReadOnly">Text area readonly</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" readonly="readonly" id="TextAreaReadOnly" name="TextAreaReadOnly">
I am some readonly text</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaReadOnly" data-valmsg-replace="true"></span>
</div>
</div>

Text area disabled

Copy


                <turas-text-area asp-for="TextAreaDisabled" asp-is-disabled="True" />

Copy


                <div class="form-group form-text-area "><label class="control-label   " for="TextAreaDisabled">Text area  disabled</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" disabled="disabled" id="TextAreaDisabled" name="TextAreaDisabled">
I am a disabled textarea</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaDisabled" data-valmsg-replace="true"></span>
</div>
</div>

Text area hide label

Copy


                <turas-text-box asp-for="TextAreaHideLabel" hide-label />

Copy


                <div class="form-group form-text-box "><label class="control-label   sr-only" for="TextAreaHideLabel">Text area hide label</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextAreaHideLabel" name="TextAreaHideLabel" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaHideLabel" data-valmsg-replace="true"></span>
</div>
</div>

Parameters for turas-text-area

asp-for - binds the text area to a model property
guidance-text - provides additional guidance for the user
field-column-widths - sets the column width for the text area
additional-classes - allows for custom CSS classes to be added
hide-validation-message - hides validation messages for the text area
readonly - makes the text area read-only
asp-is-disabled - disables the text area
hide-label - hides the label for the text area

Testing

Check that the textarea:

can be used with a keyboard only, with no keyboard traps
allows users to type, edit and delete text using only the keyboard
shows a visible focus state when the textarea receives focus
is announced correctly by screen readers, including its label, role and current value
hint text or instructions are read out (for example, character limits or formatting guidance) by screen readers
error messages are announced by screen readers and associated with the textarea
input does not trigger unexpected changes while typing
required fields are clearly communicated
character limits (if present) are communicated clearly and updated as users type
remains usable at 400% zoom and supports reflow without horizontal scrolling

Developer considerations

When using the textarea component in your form:

provide a visible label using <label for=""> and an ID
make sure the textarea has a programmatic name (via label or aria-labelledby)
use aria-describedby to associate hint text and error messages with the textarea
write error messages that explain what went wrong and how to fix it
do not rely on placeholder text as a label
make sure a visible focus state that meets contrast requirements
make sure the textarea remains usable when text is resized and content reflows
avoid auto-submitting or triggering unexpected changes while typing
make sure sufficient touch target size and spacing, with a target size of at least 24 × 24 CSS pixels
if a character limit is used, communicate it clearly
update the character count correctly as users type
provide feedback when users approach or exceed the limit
make sure error states are clearly visible and are programmatically associated with the textarea

Required fields

If your form contains fields that users must complete:

clearly indicate when the textarea is required by using a visual indicator such as an asterisk
do not rely on the visual indicator alone (for example, an asterisk) to communicate that a field is required, include the help text “Required fields are marked with an asterisk *” at the top of every page of the form
make sure the required state of the textarea is programmatically available to assistive technologies using aria-required="true"

Text box

Validation error messages

Text area

Examples

Usage

References

Parameters for turas-text-area

Testing

Developer considerations

Required fields

Was this page helpful?