Text box (text input)

Enables users to input a single-line of text.

Examples

A form text field used for entering a single line of text, such as name, email and other short text. A text box will always have a label. If it is a required field, it should be marked with an asterisk* alongside the label. Guidance text is optional, and used to guide the user on what’s expected.

Usage

Used to allow a user to type in text information that is no longer than a single line.

Do:

only use text input if the text to be entered is a single line, if it is multi-line text, then use Text area
make sure the size of the input field is appropriate for the content length the user may enter
include a visible label that informs the user about the content they need to enter in the field
use a <label> tag in HTML to describe the purpose of the input field

Avoid:

using text input if a user can only enter an option from a predefined list, use dropdown, select, or radio button group instead
using placeholder text due to accessibility concerns, including its unavailability to certain assistive technologies, potential colour and contrast issues, and the risk of users mistaking the input as pre-filled

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-2dc3cae1-e044-41cb-b0c7-cfc4a85fec52" aria-expanded="false" aria-controls="collapse-2dc3cae1-e044-41cb-b0c7-cfc4a85fec52"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-2dc3cae1-e044-41cb-b0c7-cfc4a85fec52">   
                <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?