HTML Attributes

• Jan 20, 2026
• 3 minutes to read

Our Blazor Editors ship with a comprehensive set of public API members (properties, methods, and events) that help configure and customize the components.

If the included API does not meet your requirements, you can use standard HTML attributes to configure Blazor components.

Apply HTML Attributes to a Component

To apply an HTML attribute to a component, specify the attribute’s name and value among component properties in the markup. If the specified name does not match an existing component property name, the attribute is applied to the component.

HTML attributes are usually applied to the component’s root element. For a list of exceptions, see the following section: Attributes Applied to the Input or Textarea Element.

The following code snippet sets the id and title attributes for a Date Edit component.

<DxDateEdit Date="DateTime.Today" id="my-dateedit" title="My Title" .../>

The rendered code:

<div id="my-dateedit" title="My Title" ... >
    <div>
        <div>
            <input ... >
        </div>
    </div>
</div>

Blazor components implement the Attributes property. When you specify an HTML attribute in the markup, the component passes the specified value to the Attributes collection. You can use the collection to modify attributes at runtime.

<DxDateEdit Date="DateTime.Today" Attributes="deAttributes"/>

@code {
    Dictionary<string, object> deAttributes { get; set; } = new();

    protected override void OnInitialized() {
        deAttributes["id"] = "my-dateedit";
        deAttributes["title"] = "My Title";
    }
}

Attributes Applied to the input or textarea Element

The following editors render standard HTML input elements ( Memo renders a textarea element).

|

• CheckBox
• ComboBox
• Date Edit
• Masked Input
• Memo

|

• Radio
• Spin Edit
• TagBox
• Text Box
• Time Edit

|

For these editors, the following HTML attributes are applied to the input element (textarea for Memo):

|

• aria-label
• aria-labelledby
• aria-details
• aria-describedby

|

• aria-invalid
• aria-keyshortcuts
• aria-required
• accesskey

|

• autocomplete
• list[1]
• maxlength
• name

|

• pattern
• required
• spellcheck[2]
• type

|

<DxTextBox NullText="Type..." name="textBox" maxlength="10" autocomplete="on" />

The rendered code:

<div ... >
    <div ... >
        <div>
            <input type="text" name="textBox" placeholder="Type..." maxlength="10" autocomplete="on">
        </div>
    </div>
</div>

Limitation: HTML Attributes for Editors with Masks

When you apply a mask to an editor, the mask controls the input and the editor ignores the maxlength attribute. In this case, you can configure mask settings to limit the length of the editor’s value.

For example, to limit the length of a numeric value in the editor, we recommend that you use a mask with a limited number of symbols.

<DxMaskedInput @bind-Value="@Value" ShowValidationIcon="true" Mask="##############0" />

See the following article for additional information on mask formats: Custom format strings.

Footnotes

1. Applied to Date Edit, Masked Input, Memo, Spin Edit, Text Box, and Time Edit.

2. Applied to Combo Box, Drop-Down Box, Masked Input, Memo, Search Box, Tag Box, and Text Box.