Customization in Blazor Numeric TextBox Component

14 Aug 20261 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>

@code {
    private int? textvalue = 5;
}

Blazor Numeric TextBox

Disable interaction in input

Completely disable cursor focus and selection on the text box by setting the Enabled property to false.

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

@code {
    private int? textvalue = 5;
}

Alternatively, keep the field focusable but disable only pointer interactions by setting pointer-events: none for the input element as shown below.

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

@code {
    private int? textvalue = 5;
}