Text box (text input)

Allows users to enter a single line of text.

Examples

Usage

Use a text box when the user needs to enter a single line of text, such as a name or email address. Every text box must have a label. If the field is required, show an asterisk (*) next to the label.

You can include optional guidance text to help users understand what to enter. If the guidance is longer than a short sentence, use a guidance accordion instead.

Choose the appropriate input type in the HTML to help with accessibility, validation and the right on-screen keyboard on touch-screen devices.

Common input types

text – for general short text
number - for numbers
email – for email addresses
tel – for phone numbers
password – for concealed input

Do:

use a text box only for single-line input, for longer text, use a text area
choose a text box size that matches the length of content users are expected to enter
always include a visible label that clearly describes what the user should enter

Avoid:

using a text box when users must choose from a set list of options, instead use a select or radio button group
relying on placeholder text because it can be inaccessible to some users, may not meet contrast requirements, and can be mistaken for pre-filled content

Please correct the errors and try again.

Text box


                <turas-text-box asp-for="TextBoxBasic"></turas-text-box>


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

Text box required


                <turas-text-box asp-for="TextBoxBasicRequired" />


                <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxBasicRequired">Text box required</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" data-val="true" data-val-required="The Text box required field is required." id="TextBoxBasicRequired" name="TextBoxBasicRequired" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxBasicRequired" data-valmsg-replace="true"></span>
</div>
</div>

Text box guidance text

I am some guidance text


                <turas-text-box asp-for="TextBoxWithGuidanceText" guidance-text="I am some guidance text" />


                <div class="form-group form-text-box "><label class="control-label   " for="TextBoxWithGuidanceText">Text box guidance text</label>
<div class="form-field-guidance-text">I am some guidance text</div>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxWithGuidanceText" name="TextBoxWithGuidanceText" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxWithGuidanceText" data-valmsg-replace="true"></span>
</div>
</div>

Text box guidance text accordion

A paragraph.

List item
List item
List item


                <turas-text-box asp-for="TextBoxWithGuidanceTextAccordion">

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


                <div class="form-group form-text-box "><label class="control-label   " for="TextBoxWithGuidanceTextAccordion">Text box 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-7573c563-77cf-4b36-8490-f68be7181538" aria-expanded="false" aria-controls="collapse-7573c563-77cf-4b36-8490-f68be7181538"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-7573c563-77cf-4b36-8490-f68be7181538">   
                <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">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxWithGuidanceTextAccordion" name="TextBoxWithGuidanceTextAccordion" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxWithGuidanceTextAccordion" data-valmsg-replace="true"></span>
</div>
</div>

Text box form field width


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


                <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxWithColumnClasses">Text box form field width</label>
<div class="row">
<div class="col-md-4">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" data-val="true" data-val-required="The Text box form field width field is required." id="TextBoxWithColumnClasses" name="TextBoxWithColumnClasses" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxWithColumnClasses" data-valmsg-replace="true"></span>
</div>
</div>

Text box additional classes


                <turas-text-box asp-for="TextBoxAdditionalClasses" additional-classes="mt-50" />


                <div class="form-group form-text-box mt-50"><label class="control-label   " for="TextBoxAdditionalClasses">Text box additional classes</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxAdditionalClasses" name="TextBoxAdditionalClasses" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxAdditionalClasses" data-valmsg-replace="true"></span>
</div>
</div>

Text box in a row

Text box in a row

Text box in a row


                <div class="row">
                    <div class="col-md-4">
                        <turas-text-box asp-for="TextBoxInRowOne" />
                    </div>
                    <div class="col-md-4">
                        <turas-text-box asp-for="TextBoxInRowTwo" />
                    </div>
                    <div class="col-md-4">
                        <turas-text-box asp-for="TextBoxInRowThree" />
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group form-text-box "><label class="control-label   " for="TextBoxInRowOne">Text box in a row</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxInRowOne" name="TextBoxInRowOne" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowOne" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-text-box "><label class="control-label   " for="TextBoxInRowTwo">Text box in a row</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxInRowTwo" name="TextBoxInRowTwo" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowTwo" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-text-box "><label class="control-label   " for="TextBoxInRowThree">Text box in a row</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxInRowThree" name="TextBoxInRowThree" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowThree" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                </div>

Text box in a row required

Text box in a row required

Text box in a row required


                <div class="row">
                    <div class="col-md-4">
                    <turas-text-box asp-for="TextBoxInRowOneRequired" />
                    </div>
                    <div class="col-md-4">
                    <turas-text-box asp-for="TextBoxInRowTwoRequired" />
                    </div>
                            <div class="col-md-4">
                    <turas-text-box asp-for="TextBoxInRowThreeRequired" />
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-4">
                    <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxInRowOneRequired">Text box in a row required</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" data-val="true" data-val-required="The Text box in a row required field is required." id="TextBoxInRowOneRequired" name="TextBoxInRowOneRequired" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowOneRequired" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                    <div class="col-md-4">
                    <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxInRowTwoRequired">Text box in a row required</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" data-val="true" data-val-required="The Text box in a row required field is required." id="TextBoxInRowTwoRequired" name="TextBoxInRowTwoRequired" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowTwoRequired" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                            <div class="col-md-4">
                    <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxInRowThreeRequired">Text box in a row required</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" data-val="true" data-val-required="The Text box in a row required field is required." id="TextBoxInRowThreeRequired" name="TextBoxInRowThreeRequired" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowThreeRequired" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                </div>

Text box hide validation message


                <turas-text-box asp-for="TextBoxBasicRequiredHideValidationMessage" hide-validation-message />


                <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxBasicRequiredHideValidationMessage">Text box hide validation message</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" data-val="true" data-val-required="The Text box hide validation message field is required." id="TextBoxBasicRequiredHideValidationMessage" name="TextBoxBasicRequiredHideValidationMessage" value="" />
</div>

</div>
</div>

Text box readonly


                    <turas-text-box asp-for="TextBoxReadOnly" readonly />


                    <div class="form-group form-text-box "><label class="control-label   " for="TextBoxReadOnly">Text box readonly</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" readonly="readonly" type="text" id="TextBoxReadOnly" name="TextBoxReadOnly" value="I am some readonly text" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxReadOnly" data-valmsg-replace="true"></span>
</div>
</div>

Text box disabled


                    <turas-text-box asp-for="TextBoxDisabled" asp-is-disabled="True" />


                    <div class="form-group form-text-box "><label class="control-label   " for="TextBoxDisabled">Text box disabled</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" disabled="disabled" type="text" id="TextBoxDisabled" name="TextBoxDisabled" value="I am a disabled text box" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxDisabled" data-valmsg-replace="true"></span>
</div>
</div>

Text box hide label


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


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

Parameters for turas-text-box

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

Previous

Single select

Next

Text area

Was this page helpful?