Default HTML Attributes and DOM Events

4 Aug 20213 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.

Using HTML Attributes and DOM Events in the Input Element

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.

Available 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

If you specify both HTML attribute and Syncfusion API in the component, then the Syncfusion API will get higher priority and will be 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, you may need to add HTML attributes to the root/container element of the above input-based components. For this, you can use HtmlAttributes Syncfusion API to add HTML attributes to 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

The Syncfusion Blazor UI component supports binding the native DOM events on the input element.

<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";
    }
}

Using HTML Attributes and DOM Events in 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>