Text area

Examples

Please correct the errors and try again.

Text area


                <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" 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-8349f3b4-3c65-42c4-bdbd-31d84596ce2a" aria-expanded="false" aria-controls="collapse-8349f3b4-3c65-42c4-bdbd-31d84596ce2a"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-8349f3b4-3c65-42c4-bdbd-31d84596ce2a">   
                <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" 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" 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" 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" 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" 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

Text box

Validation error messages

Examples

Parameters for turas-text-area

Was this page helpful?