HTML Attributes

  • 2 minutes to read

You can use standard HTML attributes to configure Blazor components. If you specify attributes in a component's markup, they are applied to the component's root or input element.

Attributes Applied to the Root Element

HTML attributes are usually applied to the component's root element. For example, the code below sets the id and title attributes to a Date Edit component.

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

The rendered code:

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

You can also use HTML attributes to handle events. For example, the following code sets the ondblclick attribute to a Button component:

<DxButton Text="My button" @ondblclick="@(()=>Console.WriteLine("The button is double-clicked"))"/>

Attributes Applied to the Input Element

Text Box, ComboBox, Memo, Spin Edit, Date Edit, and TagBox components use the standard HTML input element. If you specify HTML attributes listed below in these components, the attributes apply to corresponding input elements.

The following code specifies the maxlength and autocomplete attributes for a Text Box:

<DxTextBox Text="Some text" maxlength="10" autocomplete="on"/ >

The rendered code:

<div id="..." class="...">
    <div class="...">
        <div>
            <input name="..." type="..." maxlength="10" autocomplete="on">
        </div>
    </div>
</div>