Number input

Color

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

ClassPropertyColor token
.bx--labeltext color$text-02
.bx--number input[type='number']text color$text-01
.bx--numberbackground-color$field-01
.bx--number--lightbackground-color$field-02
.bx--numberborder-bottom$ui-04
.bx--number__controlssvg color$icon-01
Number input example

Number input example

Interactive states

ClassPropertyColor token
.bx--number:focusborder$focus
.bx--number__controls:focusborder$focus
[data-invalid]border$support-01
[data-invalid]:focuscolor$support-01
.bx--form-requirementtext color$support-01
.bx--label:disabledtext color$disabled-02
.bx--number:disabledbackground-color$disabled-01
.bx--number input[type='number']:disabledtext color$disabled-03

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 should have a .not-allowed cursor on hover.

Typography

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 token
.bx--label12 / 0.75Regular / 400$label-01
.bx--number input[type='number']14 / 0.875Regular / 400$body-short-01
.bx--form-requirement12 / 0.75Regular / 400$label-01

Structure

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--labelmargin-bottom8 / 0.5$spacing-03
.bx--number inputheight40 / 2.5
.bx--number input[type='number']padding-left16 / 1$spacing-05
.bx--number__controlspadding-left, padding-right16 / 1$spacing-05
.bx--numberborder-bottom1px
Structure and spacing for number input

Structure and spacing measurements for a number input | px / rem