NumericTextBox

NumericTextBox Overview

A NumericTextBox combines the functionalities of a text box and a Spin button. The component allows users to provide numeric values in a specific format corresponding to a validation rule, and enables developers to implement user input restriction mechanism for form or input fields.

By default, the component renders Spin buttons which increase or decrease the numeric value with a predefined step. When providing the numeric value, users can either type that value or use the Spin buttons, which inherit the size and fill mode properties of the NumericTextBox.

Live Demo

Appearance

NumericTextBoxes provide built-in styling options that grant visually appealing and flexible rendering experience.

Apart from the default vision of the Telerik and Kendo UI NumericTextBox, the component supports alternative styling options which enable you to configure the individual aspects of its appearance.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI NumericTextBox can acquire the following states which you can set by using the following classes:

• A NumericTextBox in its normal state appears active, and is usable and clickable.
• k-hover—Тhe hover state of a NumericTextBox is applied when the user hovers over the component. This state indicates that the control is interactive and enabled by changing the mouse pointer to indicate that you can type within the component.
• k-focus—The focus state is triggered after the NumericTextBox has been spotlighted with the mouse or the keyboard.
• k-invalid—The invalid state of a NumericTextBox results from failing the validation either because of the lack of a required type of input or any input at all.
• k-invalid k-focus—The invalid focus state of a NumericTextBox is a result of spotlighting a NumericTextBox whose values or type of input didn’t pass the validation requirements.
• k-disabled—The disabled state indicates that a NumericTextBox is temporarily unclickable because, for example, the page requires additional user input, or something important is missing before users continue to the next step. To indicate that they are unavailable, NumericTextBoxes in their disabled state are usually faded, slightly out of focus, and show a subdued text label.

Anatomy

The anatomy of the NumericTextBox summarizes the elements of the component. Depending on its elements, the Telerik and Kendo UI NumericTextBoxes can be any of the following basic types:

• A vanilla NumericTextBox
• A NumericTextBox with a label in Form components
• A NumericTextBox with a label and a hint in Form components

The next image shows the anatomy of a NumericTextBox and includes the following elements:

1. Input field
2. Label (optional, used only in the Form component)
3. Hint text (optional, used only in the Form component)
4. Placeholder or numeric value
5. Spin button

The NumericTextBox can host a number of other elements to ensure the functionalities it supports are visualized and properly implied to the user.

The NumericTextBox can render a Clear button that resets its value.

When included in a form component, the NumericTextBox supports validation. Validation enables you to restrict the user input and prevent the submission of forms that are in an invalid state.

The NumericTextBox can also accommodate custom items, such as icons, symbols, text, or a component which prompts users about the type of the required input or possible actions, as its prefix and suffix adornments.

1. Icon prefix/suffix
2. Text prefix/suffix
3. Component prefix/suffix

The following image shows a NumericTextBox with a Clear button, and a validation and suffix visual:

Size

The NumericTextBox provides the size configuration option that enables you to control how big or small the rendered NumericTextBox will be. NumericTextBoxes also provide options for size customization.

size provides the following available options:

• small—Renders a small NumericTextBox which is suitable for compact components, such as Toolbar, or Grid, where the available space is limited.
• medium(default)—Renders a medium NumericTextBox. The medium Telerik and Kendo UI NumericTextBoxes use the same typographic style as the small NumericTextBoxes. However, the vertical height of the component is achieved by setting the $kendo-spacing, 1 spacing value for their vertical paddings.
• large—Renders a large NumericTextBox which is used in adaptive designs. The large Telerik and Kendo UI NumericTextBoxes achieve the recommended touch area dimensions both by doubling the value of their vertical paddings to $kendo-spacing, 2 and by using a different typographic style with a bigger font size and line height.
• none—Does not set a size and allows you to add your own, custom value.

1. Small
2. Medium (default)
3. Large

Fill Mode

The NumericTextBox provides the fillMode configuration option that enables you to control the way in which color is applied to the rendered button. NumericTextBoxes also provide options for fill-mode customization.

fillMode provides the following available options:

• solid(default)—The solid NumericTextBox has a border and a background, puts a stronger emphasis on the action it indicates and draws the user attention.
• outline—The outlined NumericTextBox has only a border and no background, provides a minimalist look, and is suitable if it aims to blend in with the background or with other UI elements. The outline fill mode puts less emphasis on the text field.
• flat—By its plain and discreet look, the flat NumericTextBox is a good choice when you need an unobtrusive component which doesn't distract users from the elements of higher importance. The flat fill mode emphasizes the data input rather than the text field, reduces the additional visual noise, and helps users focus better on the content.

1. Solid (default)
2. Outline
3. Flat

Border Radius

The NumericTextBox provides the rounded option that enables you to control how much border radius will apply to the rendered button. NumericTextBoxes also provide options for border-radius customization.

rounded provides the following available options:

• small—Renders a border radius of 2 px.
• medium (default)—Renders a border radius of 4 px.
• large—Renders a border radius of 6 px.
• full—Renders a border radius of 9999 px.
• none—Does not set a rounded and allows you to add your own, custom value.

1. Small
2. Medium
3. Large
4. Full

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular NumericTextBoxFind more information about the Kendo UI for Angular NumericTextBox in the official product documentation of the component.

Telerik UI for Blazor NumericTextBoxFind more information about the Telerik UI for Blazor NumericTextBox in the official product documentation of the component.

Kendo UI for jQuery NumericTextBoxFind more information about the Kendo UI for jQuery NumericTextBox in the official product documentation of the component.

KendoReact NumericTextBoxFind more information about the KendoReact NumericTextBox in the official product documentation of the component.

Kendo UI for Vue NumericTextBoxFind more information about the Kendo UI for Vue NumericTextBox in the official product documentation of the component.

Telerik UI for ASP.NET Core NumericTextBoxFind more information about the Telerik UI for ASP.NET Core NumericTextBox component.

Telerik UI for ASP.NET MVC NumericTextBoxFind more information about the Telerik UI for ASP.NET MVC NumericTextBox component.