DxFormLayoutItem.CaptionFor Property

Specifies a unique identifier of the layout item’s caption and allows you to associate the caption with an input component in the template.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

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

Property Value

Type	Default	Description
String	null	A unique identifier.

Remarks

Use the CaptionFor property to associate a layout item’s caption with a component in the layout item’s template.

1. Specify the layout item’s Caption property. A browser renders the caption as an HTML label element.
2. Set the layout item’s CaptionFor property to a unique value. This value is assigned to the label’s for attribute. Note that this value is case-sensitive, should contain at least one character, and should not contain whitespaces (spases, tabs, etc.)

3. Set the ID of a component in the template to the same value as the item’s CaptionFor.

   If you use a DevExpress data editor (DxTextBox, DxSpinEdit, etc.), specify the InputId property.

   <DxFormLayout>
       <DxFormLayoutItem Caption="Position:" ColSpanMd="12" CaptionFor="text_box">
           <DxTextBox @bind-Text="@Position" Enabled="!Unemployed" InputId="text_box" />
       </DxFormLayoutItem>
       @*...*@
   </DxFormLayout>
   

   If you use a non-DevExpress component, specify the id property.

   <DxFormLayout>
       <DxFormLayoutItem Caption="Position:" CaptionFor="text_box">
           <input value="@Name" id="text_box">
       </DxFormLayoutItem>
   </DxFormLayout>
   

You can click the associated label to focus/activate the input element.

Note

If you do not specify the CaptionFor property, Form Layout generates a random identifier (System.Guid) and assigns it to the label’s for attribute and the id of the first component in the template.

Combination with the CaptionId Property

CaptionFor only applies to HTML <input> or <textarea> elements. To create an accessible relationship between the caption and a non-input child component, use the CaptionId property.

• When you specify CaptionId without CaptionFor, the caption is rendered as an HTML span element with an id attribute.
• When you specify both CaptionFor and CaptionId, the caption is rendered as an HTML label element with both for and id attributes.