Display

Examples

Usage

Display static, non-editable information within a form, enabling users to review details clearly without the ability to change them. This helps distinguish non-interactive content from editable fields and supports a clear, accessible interface. This is crucial for forms that include review or confirmation steps, allowing users to check information without risk of accidental edits.

Common use cases:

showing previously submitted information for review
displaying calculated or system-generated values
presenting read-only data alongside editable fields
summaries in multi-step forms or wizards
print-friendly or export views from form data

Do:

use the display component to visually distinguish static content from editable fields
use instead of read only form inputs if the data in the input will never be editable
use the format '23 October 1995' when displaying a date, spelling out the month in full
use semantic HTML elements to ensure screen readers announce the content correctly
stack content vertically

Avoid:

when users need to edit or interact with content or data
using it to show frequently changing dynamic data, unless users are clearly informed about those changes

Please correct the errors and try again.

Display

Display text

Copy


                <turas-display asp-for="DisplayBasic" />

Copy


                <div class="form-group form-static-field "><p class="control-label ">Display</p>
<p class="form-control-static col" id="DisplayBasic_Display">Display text</p>
</div>

Form field width

Display text

Copy


                <turas-display asp-for="DisplayFormFieldWidth" field-column-widths="col-md-2" />

Copy


                <div class="form-group form-static-field "><p class="control-label ">Form field width</p>
<p class="form-control-static col-md-2" id="DisplayFormFieldWidth_Display">Display text</p>
</div>

Display additional classes

Display text

Copy


                <turas-display asp-for="DisplayAdditionalClasses" additional-classes="mt-5" />

Copy


                <div class="form-group form-static-field mt-5"><p class="control-label ">Display additional classes</p>
<p class="form-control-static col" id="DisplayAdditionalClasses_Display">Display text</p>
</div>

Custom Label

Copy


                <turas-display asp-for="CustomLabel" custom-label="Custom Label" />

Copy


                <div class="form-group form-static-field "><p class="control-label ">Custom Label</p>
<p class="form-control-static col" id="CustomLabel_Display"></p>
</div>

Text container ID

Display text

Copy


                <turas-display asp-for="DisplayTextContainerId" text-container-id="myid" />

Copy


                <div class="form-group form-static-field "><p class="control-label ">Text container ID</p>
<p class="form-control-static col" id="myid">Display text</p>
</div>

Display in a row

Display text

Display in a row

Display text

Display in a row

Display text

Copy


                <div class="row">
                    <div class="col-md-4">

                        <turas-display asp-for="DisplayInARowOne" />

                    </div>
                    <div class="col-md-4">

                        <turas-display asp-for="DisplayInARowTwo" />

                    </div>
                    <div class="col-md-4">

                        <turas-display asp-for="DisplayInARowThree" />

                    </div>
                </div>

Copy


                <div class="row">
                    <div class="col-md-4">

                        <div class="form-group form-static-field "><p class="control-label ">Display in a row</p>
<p class="form-control-static col" id="DisplayInARowOne_Display">Display text</p>
</div>

                    </div>
                    <div class="col-md-4">

                        <div class="form-group form-static-field "><p class="control-label ">Display in a row</p>
<p class="form-control-static col" id="DisplayInARowTwo_Display">Display text</p>
</div>

                    </div>
                    <div class="col-md-4">

                        <div class="form-group form-static-field "><p class="control-label ">Display in a row</p>
<p class="form-control-static col" id="DisplayInARowThree_Display">Display text</p>
</div>

                    </div>
                </div>

Parameters for turas-display

asp-for - Binds the display to a model property
field-column-widths - Sets the column width for the display
additional-classes -Adds custom CSS classes to the display
custom-label - Specifies a custom label for the display
hide-label - Hides the label for the display if set to true
text-container-id - Sets a custom ID for the text container
raw: - Displays the raw value without encoding
asp-format - Formats the displayed value according to the specified format string

Date picker

Multi select

Examples

Usage

Parameters for turas-display

Was this page helpful?