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)
)

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)
)

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)
)

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

• Appearance of the NumericTextBox HtmlHelper for ASP.NET MVC (Demo)
• Server-Side API