New to Telerik UI for ASP.NET Core? Download free 30-day trial

NumericTextBox Appearance

As of the R1 2022 release, the NumericTextBox component uses a new rendering. To learn more about why we decided to create a new rendering for our components, see the Components Rendering article.

For a live example of the styling options of the NumericTextBox, visit the Appearance Demo of the NumericTextBox.

Options

The NumericTextBox HtmlHelper supports the following styling options:

  • Size()—configures the overall size of the component.
  • FillMode()—configures how the color is applied to the component.
  • Rounded()—configures the border radius of the component.

Size

The Size() method allows you to adjust the size of the NumericTextBox. The default size is Medium.

@(Html.Kendo().NumericTextBox()
    .Name("numeric")
    .Size(ComponentSize.Medium)
)
<kendo-numerictextbox name="numeric"
                      size="ComponentSize.Medium">
</kendo-numerictextbox>

The option is applied to the wrapping span element through the k-input-md class.

<span class="k-numerictextbox k-input k-input-md">
</span>

The following values are available for the Size option:

  • Small
  • Medium
  • Large
  • None

Rounded

You can control how much border radius is applied to the component by using the Rounded() method. The default value is Medium.

@(Html.Kendo().NumericTextBox()
    .Name("numeric")
    .Rounded(Rounded.Medium)
)
<kendo-numerictextbox name="numeric"
                      rounded="Rounded.Medium">
</kendo-numerictextbox>

The option is applied to the wrapping span element through the k-rounded-md class.

<span class="k-numerictextbox k-input k-rounded-md">

The Rounded option supports the following values:

  • Small
  • Medium
  • Large
  • Full
  • None

FillMode

The FillMode option controls the way the color is applied to the NumericTextBox. The default value is Solid.

@(Html.Kendo().NumericTextBox()
    .Name("numeric")
    .FillMode(FillMode.Solid)
)
<kendo-numerictextbox name="numeric"
                      fill-mode="FillMode.Solid">
</kendo-numerictextbox>

The option is applied to the wrapping span element through the k-input-solid class.

<span class="k-numerictextbox k-input k-input-solid">

The following values are available for the FillMode option:

  • Solid
  • Flat
  • Outline
  • None

Old vs New Rendering

The old rendering of the NumericTextBox consisted of two span wrapper elements:

  • a span wrapper element with the k-numerictextbox class
  • a nested span wrapper element with the k-numeric-wrap class that held all the styling information related to the widget
 <!-- OLD -->
<span class="k-widget k-numerictextbox" style="width: 100%;">
    <span class="k-numeric-wrap k-state-default">
     <input type="text" class="k-input" >
    </span>
</span>

The new rendering of the component consists of a wrapping span element that has a child input element.

The span element controls the overall appearance of the widget and has the following class structure:

<!-- NEW -->
<span class="k-numerictextbox k-input k-input-md k-rounded-md k-input-solid">
    <input type="text" class="k-input-inner" value="..." placeholder="..." />
</span>

Visual Backwards Compatibility

The new styling and rendering supports only the default options when you use a LESS theme.

Previously, you had to obtain a reference to the numerictextbox element through the k-input class

$(".k-input") // Returns a reference to the NumericTextBox element in the old rendering.

With the new rendering, you must target the numerictextbox element by using the k-input-inner class.

$(".k-input-inner") // Returns a reference to the NumericTextBox element in the new rendering.

The following example showcases how to apply a background color to the NumericTextBox in both the new, and the old rendering:

    <style>
      /* Doesn't work AFTER R1 2022 */
      .k-input {
        background-color: #0071bc !important; /* Blue color in versions BEFORE R1 2022 */
      }
      /* Doesn't work BEFORE R1 2022 */
      .k-input-inner {
        background-color: #2e8540 !important; /* Green color in versions AFTER R1 2022 */
      }
    </style>

See Also

In this article