DxFormLayoutItem.CaptionId Property

Specifies a unique identifier of the layout item’s caption.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

[DefaultValue(null)]
[Parameter]
public string CaptionId { get; set; }

Property Value

Type	Default	Description
String	null	A unique identifier.

Remarks

Use the CaptionId property to specify a unique identifier (HTML id attribute) for the layout item’s caption.

Screen readers can access caption information if you define a relationship between the layout item and the child component:

1. Specify the Caption property.
2. Set the CaptionId property to a value that is unique across the entire page. This value is case-sensitive and should not contain whitespaces.
3. Set the child component’s aria-labelledby attribute to the same value as the item’s CaptionId.

<DxFormLayout>
    <DxFormLayoutItem Caption="Select your city:"
                      CaptionId="list-label">
        <DxListBox Data="@Cities"
                   aria-labelledby="list-label"
                   TData="string"
                   TValue="string" />
    </DxFormLayoutItem>
</DxFormLayout>

@code {
    List<string> Cities = new List<string> { "London", "Berlin", "Paris" };
}

Combination with the CaptionFor Property

• If the DxFormLayoutItem contains an HTML <input> or <textarea> element, use the CaptionFor property instead.
• When you specify CaptionId without CaptionFor, the caption is rendered as an HTML span element with an id attribute.
• When you specify both CaptionId and CaptionFor, the caption is rendered as an HTML label element with both for and id attributes.