DxFormLayoutItem.Caption Property

Specifies an item’s caption.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string Caption { get; set; }

Property Value

Type	Description
String	The item’s caption.

Remarks

Use the Caption property to specify the item’s caption.

Position Captions

You can display the caption above an item (Vertical) or at its left (Horizontal). Use the item’s CaptionPosition property to position a single item. To specify the position for all captions in the Form Layout component, layout group, or tab page, use the corresponding object’s CaptionPosition property. Individual settings have higher priority.

<DxFormLayout>
    <DxFormLayoutItem Caption="Full Name:">
        <DxTextBox></DxTextBox>
    </DxFormLayoutItem>
    <DxFormLayoutItem Caption="Phone Number:">
        <DxMaskedInput @bind-Value="@Telephone" Mask="[phone]" />
    </DxFormLayoutItem>
    <DxFormLayoutItem ColSpanMd="12" Caption="Feedback:" CaptionPosition="CaptionPosition.Vertical">
        <DxMemo NullText="Leave your feedback here..."></DxMemo>
    </DxFormLayoutItem>
</DxFormLayout>

Run Demo: Form Layout - Caption Position

Align Captions

Use the ItemCaptionAlignment property to set the caption padding.

The code below sets the ItemCaptionAlignment property to All.

<DxFormLayout ItemCaptionAlignment="ItemCaptionAlignment.All">
    <DxFormLayoutGroup Caption="Personal information">
        <DxFormLayoutItem Caption="Full Name:">
            <DxTextBox Text="Mary Smith" />
        </DxFormLayoutItem>
        <!-- -->
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Caption="Employment Information">
        <!-- -->
    </DxFormLayoutGroup>
</DxFormLayout>

In the following example, the ItemCaptionAlignment property is set to InGroups:

In the following example, the ItemCaptionAlignment property is set to None:

Associate an Editor with the Caption

To associate a component in a layout item template with the layout item’s caption, use the CaptionFor property.

<DxFormLayout>
    <DxFormLayoutItem Caption="Contact Name:" CaptionFor="name_text_box">
        <input value="@Name" id="name_text_box">
    </DxFormLayoutItem>

    <DxFormLayoutItem Caption="Email:" CaptionFor="email_text_box">
        <input value="@Email" id="email_text_box">
    </DxFormLayoutItem>
</DxFormLayout>

If you do not specify the CaptionFor property value but specify the Caption, the Form Layout generates a random identifier and sets it to the caption label’s for attribute and the associated component’s ID property.