Telerik UI for Windows 8 HTML

This article will show and explain the HTML output and CSS classes of RadNumericBox in basic scenarios (some HTML attributes have been removed for simplicity).

Basic Output

Below you can see the basic HTML output of the RadNumericBox and descriptions of its elements.

HTML Copy imageCopy
<span class="t-numericbox win-interactive">
    <span class="k-widget k-numerictextbox">
        <span class="k-numeric-wrap k-state-default">
            <input class="k-input" type="text"/>
            <span class="k-select">
                <span class="k-link">
                    <span class="k-icon k-i-arrow-n">Increase value</span>
                <span class="k-link">
                    <span class="k-icon k-i-arrow-s">Decrease value</span>

Class/selector name



The RadNumericBox wrapper element. This is the element that is passed in the control's constructor.

.k-numerictextbox .k-numeric-wrap

The wrapper of the numeric box widget.

.k-numerictextbox .k-numeric-wrap.k-state-default .k-input

The input element of the widget.

.k-numerictextbox .k-numeric-wrap .k-select

The container of the selection arrows containers.

.k-numerictextbox .k-numeric-wrap .k-select .k-link

The selection arrows containers.

.k-numerictextbox .k-numeric-wrap .k-select .k-link .k-icon

The actual selection arrows.

.k-numerictextbox .k-numeric-wrap .k-select .k-link .k-icon.k-i-arrow-n

The "increase value" selection arrow.

.k-numerictextbox .k-numeric-wrap .k-select .k-link .k-icon.k-i-arrow-s

The "decrease value" selection arrow.

Additional States of the Control

These CSS classes are added to the .k-numeric-wrap in different scenarios (when the widget is focused, hovered or disabled).

Class/selector name


.k-numerictextbox .k-numeric-wrap.k-state-hover

This class is added to the widget when the mouse hovers over the RadNumericBox.

.k-numerictextbox .k-numeric-wrap.k-state-focused

This class is added to the widget when the RadNumericBox is focused.

.k-numerictextbox .k-numeric-wrap.k-state-disabled

This class is added to the widget when the control is disabled. That is when the enabled property is set to false.