Default HTML attributes and DOM events

22 Oct 20253 minutes to read

The Syncfusion® Blazor UI components provide the most useful public API for component implementation and customization. Apart from this public API, the Syncfusion® Blazor UI components can support the use of default HTML attributes and DOM events in the root element of its component.

Use HTML attributes and DOM events on input elements

The following is a list of Syncfusion® Blazor UI components that use the standard HTML input element. You can apply the HTML input attributes and DOM events directly to the input element used on these Syncfusion® Blazor components.

Syncfusion® properties equivalent to HTML attributes

The following table illustrates the HTML attributes and their equivalent Syncfusion® API.

HTML Attribute Syncfusion® API Components
id ID
  • All Components
autocomplete Autocomplete
  • SfTextBox
checked Checked
  • SfCheckBox
  • SfRadioButton
disabled Disabled
  • SfCheckBox
  • SfRadioButton
Enabled
  • Others
max Max
  • SfDatePicker
  • SfDateRangePicker
  • SfDateTimePicker
  • SfNumericTextBox
  • SfTimePicker
min Min
  • SfDatePicker
  • SfDateRangePicker
  • SfDateTimePicker
  • SfNumericTextBox
  • SfTimePicker
multiple Multiple
  • SfUpload
placeholder Placeholder
  • Except below components:
  • SfCheckBox
  • SfRadioButton
  • SfUpload
readonly ReadOnly
  • Except below components:
  • SfCheckBox
  • SfRadioButton
  • SfUpload
step Step
  • SfNumericTextBox
value Value
  • Except below component:
  • SfUpload
width Width
  • Except below components:
  • SfCheckBox
  • SfRadioButton
  • SfUpload

NOTE

If both an HTML attribute and a Syncfusion® API are specified, the Syncfusion API takes precedence and is applied to the DOM element.

<SfTextBox ID="textbox" name="first-name" title="First name." minlength="15" Autocomplete="AutoComplete.Off"></SfTextBox>

The textbox will be rendered with the following output.

<span class="....">
    <input id="textbox" class="...." name="first-name" type="text" autocomplete="off" title="First name." minlength="15" .... />
</span>

In some cases, HTML attributes must be added to the root/container element instead of the input. Use the HtmlAttributes API to set attributes on the root/container element.

<SfTextBox HtmlAttributes="@(new() { { "style", "background:aliceblue;" } })"></SfTextBox>

The textbox will be rendered with the following output.

<span class="...." style="background: aliceblue;" ....>
    <input .... />
</span>

Input DOM events

Syncfusion® Blazor components support binding native DOM events on input elements.

<div class="form-group">
    <SfTextBox @onfocus="OnTextFocus" @onblur="OnTextFocusOut"></SfTextBox>
</div>

@if (eventName != string.Empty)
{
    <div class="alert alert-info">@eventName event is triggered on the TextBox.</div>
}

@code {
    private string eventName = string.Empty;

    void OnTextFocus()
    {
        eventName = "Focus";
    }

    void OnTextFocusOut()
    {
        eventName = "Focusout";
    }
}

Use HTML attributes and DOM events on the root element

The HTML attributes and DOM events can be applied directly to the component’s root element.

<SfChip @onmouseover="OnChipHover" style="border: 1px solid tomato">
    <ChipItems>
        <ChipItem Text="Apple"></ChipItem>
        <ChipItem Text="Mango"></ChipItem>
        <ChipItem Text="Banana"></ChipItem>
    </ChipItems>
</SfChip>

@code {
    public void OnChipHover(MouseEventArgs args)
    {
        // Do something here on chips hover.
    }
}

The chip container/root element will be rendered with the following output.

<div style="border: 1px solid tomato" class="...." >
    <div class="...." role="listbox">
        ....
        ....
    </div>
</div>