HTML Attributes

• Nov 22, 2023
• 2 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. For more information, refer to the component’s description.

If the included API does not meet your requirements, 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.

Apply HTML Attributes 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>

Apply HTML Attributes to the Input Element

Text Box, ComboBox, Masked Input, Memo, Spin Edit, Date Edit, Time Edit, and TagBox components use the standard HTML input element so you can apply the following HTML attributes:

Attributes

• accesskey
• autocomplete
• list (applied to Text Box, Masked Input, Memo, Spin Edit, Date Edit and Time Edit)
• maxlength
• name
• pattern
• spellcheck (applied to Text Box, Masked Input, Memo, Combo Box and Tag Box)
• tabindex
• type

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

The rendered code:

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