Customization in Blazor Numeric TextBox Component

7 Jul 20221 minute to read

Read only Input

You can disable the text box from editing by setting the readonly attribute to numeric textbox where textbox is marked as read-only. Still end-users can select text in textbox and only editing is disabled.

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

Disable interaction in input

You can 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>