Skip to main content


Inputs come in two different colors. The default input color is $field-01 and is used on $ui-01 page backgrounds. The light version input color is $field-02 and is used on $ui-02 page backgrounds.

.bx--number input[type='number']color$text-01#152935
.bx--number input[type='number']box-shadow$ui-05#5a6872
.bx--number__controls svgfill$brand-01#3d70b2

Number Input example in $field-01 and $field-02 Number Input example in $field-02 (left) and $field-01 (right)


.bx--number input[type='number']:focusbox-shadow$brand-01#3d70b2
.bx--number input[type='number']:focus ~ .bx--labelcolor$brand-01#3d70b2
.bx--number[data-invalid] input[type='number']box-shadow$support-01#e0182d
.bx--number[data-invalid] input[type='number']:focus ~ .bx--labelcolor$support-01#e0182d

Active: Number input should have a default number to start. The input should never be empty.

Help text: Help text appears below the label when the input is active. Help text remains visible while the input is focused and disappears after focus away.

Error: Error messages appear below the input field and are always present while invalid.

Disabled: Disabled state appears at 50% opacity and has a .not-allowed cursor on hover.


Number Input labels should use sentence case, with only the first word in a phrase and any proper nouns capitalized.

ClassFont-size (px/rem)Font-weightType style
.bx--label14 / 0.875Semi-Bold / 600.bx--type-zeta
.bx--number input[type='number']14 / 0.875Normal / 400-
.bx--form-requirement12 / 0.75Normal / 400.bx--type-caption


The height of a Number Input is always the same. The width however, varies based on content, layout and design. The caret icon can be found in the iconography library.

ClassPropertypx / remSpacing token
.bx--number input[type='number']height40 / 2.5-
.bx--number input[type='number']padding-left16 / 1$spacing-md
.bx--number input[type='number']padding-right32 / 2$spacing-xl
.bx--number input[type='number']box-shadow1px-
.bx--number input[type='number']:focusbox-shadow2px-

Structure and spacing measurements for a Number Input | px / rem