Skip to main contentCarbon Design System

Number input

Color

Inputs come in two different colors. The default input color is $field and is used on $background and $overlay page backgrounds.

ClassPropertyColor token
.bx--labeltext color$text-secondary
.bx--number input[type='number']text color$text-primary
.bx--numberbackground-color$field
.bx--numberborder-bottom$border-strong
.bx--number__controlssvg color$icon-primary
Number input example

Number input example

Interactive states

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

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

Helper text: Helper text appears below the label when the input is active. Helper 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 add and subtract icons can be found in the icons 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

Sizes

The height varies for each size variant and the the width varies based on content, layout, and design.

ElementSizeHeight (px/rem)
FieldSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Sizes for number input

Sizes for number input fields | px / rem