New to Telerik UI for Blazor? Start a free 30-day trial

Hide NumericTextBox Spinner Buttons

Updated on Mar 19, 2026

Environment

Product

NumericTextBox for Blazor,
Form for Blazor,
Grid for Blazor,
TreeList for Blazor

Description

The Telerik Grid for Blazor automatically displays numeric textboxes in edit cells with spinner controls. How do I not display the spinner control by default?

This KB also answers the following questions:

How to remove the NumericTextBox spinners inside Grid and TreeList components?
How to hide the spinner buttons in multiple or all Blazor NumericTextBoxes in the app?

Solution

The optimal way to hide numeric textbox spinners depends on the scenario. The following sections discuss different options that use NumericTextBox parameters or CSS.

The CSS approach does not prevent users from changing the numeric value with the keyboard Up and Down arrow keys.

Standalone NumericTextBoxes

Set Arrows="false" and Step="0" to hide the spinners of a specific NumericTextBox and disable value incrementing and decrementing with the keyboard arrow keys.

Hide NumericTextBox spinners and disable value changes with the keyboard arrow keys

<TelerikNumericTextBox @bind-Value="@NumericValue"
                       Arrows="false"
                       Step="0"
                       Width="120px" />

@code {
    private decimal NumericValue { get; set; } = 1.23m;
}

You can also use CSS to hide the spinners of all NumericTextBoxes in the app.

Hide all NumericTextBox spinners

CSS

.k-numerictextbox .k-input-spinner {
    display: none;
}

NumericTextBoxes in Forms

In Form scenarios, use a FormItem Template, which falls back to the standalone NumericTextBox option above.

Hide NumericTextBox spinners in a Form item template

RAZOR

<TelerikForm>
    <FormItems>
        <FormItem>
            <Template>
                <TelerikNumericTextBox Arrows="false"
                                       Step="0" />
            </Template>
        </FormItem>
    </FormItems>
</TelerikForm>

You can also hide the NumericTextBox spinners in Forms with CSS. You can target:

Specific Form items
Specific Forms
All Forms

Hide NumericTextBox spinners in specific Form items

RAZOR

<TelerikForm>
    <FormItems>
        <FormItem Class="no-numeric-spinners" />
    </FormItems>
</TelerikForm>

<style>
    .no-numeric-spinners .k-numerictextbox .k-input-spinner {
        display: none;
    }
</style>

Hide NumericTextBox spinners in specific Forms

RAZOR

<TelerikForm Class="no-numeric-spinners" />

<style>
    .no-numeric-spinners .k-numerictextbox .k-input-spinner {
        display: none;
    }
</style>

Hide NumericTextBox spinners in all Forms

CSS

.k-form .k-numerictextbox .k-input-spinner {
    display: none;
}

NumericTextBoxes in Grids

In Grid and TreeList editing scenarios, use a column EditorTemplate, which falls back to the standalone NumericTextBox option above. Popup FormTemplate scenarios are equivalent to NumericTextBoxes in a Form.

Hide NumericTextBox spinners in a Grid editor template

RAZOR

<TelerikGrid>
    <GridColumns>
        <GridColumn>
            <EditorTemplate>
                <TelerikNumericTextBox Arrows="false"
                                       Step="0" />
            </EditorTemplate>
        </GridColumn>
</TelerikGrid>

You can also hide the NumericTextBox spinners in Grids with CSS. You can target:

Specific Grids or all Grids.
Grids in popup, inline, and in-cell edit mode.

Hide NumericTextBox spinners in specific Grids in inline or in-cell edit mode

RAZOR

<TelerikGrid Class="no-numeric-spinners" />

<style>
    .no-numeric-spinners .k-numerictextbox .k-input-spinner {
        display: none;
    }
</style>

Hide NumericTextBox spinners in all Grids in inline or in-cell edit mode

CSS

.k-grid .k-numerictextbox .k-input-spinner {
    display: none;
}

Hide NumericTextBox spinners in specific Grids in popup edit mode

RAZOR

<TelerikGrid>
    <GridSettings>
        <GridPopupEditSettings Class="no-numeric-spinners" />
    </GridSettings>
</TelerikGrid>

<style>
    .no-numeric-spinners .k-numerictextbox .k-input-spinner {
        display: none;
    }
</style>

Hide NumericTextBox spinners in all popup Forms and Windows

CSS

.k-window .k-numerictextbox .k-input-spinner {
    display: none;
}