Customization in Blazor Numeric TextBox Component

4 Nov 20251 minute to read

Read-only input

Make the Numeric TextBox non-editable by setting the Readonly property. In read-only mode, users can still focus the field and select its content, but they cannot modify the value. This state maps to aria-readonly for assistive technologies. To completely disable user interaction (including focus), use the Enabled property instead, which maps to aria-disabled.

@using Syncfusion.Blazor.Inputs
<SfNumericTextBox ID="numeric" @bind-Value="@textvalue" Readonly="true">
</SfNumericTextBox>

Blazor Numeric TextBox

Disable interaction in input

Disable cursor focus and selection on the text box by setting pointer-events as none for input element as below,

@using Syncfusion.Blazor.Inputs
<SfNumericTextBox ID="numeric" @bind-Value="@textvalue" Readonly="true">
</SfNumericTextBox>
<style>
.e-control.e-numerictextbox.e-input{
    pointer-events:none;
}
</style>