HTML Attributes
- 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. 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.
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).
For these editors, the following HTML attributes are applied to the input element (textarea for Memo):
<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 more information on mask formats: Custom format strings.