Skip to main contentCarbon Design System

Number input


ElementPropertyColor token
Labeltext color$text-secondary
Numbertext color$text-primary
Fieldbackground-color$field *
border-bottom$border-strong *
Controlssvg color$icon-primary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Default number input example

Interactive states

StateElementPropertyColor token
HoverControlsbackground-colorfield-hover *
Error iconsvg$support-error
Error messagetext color$text-error
WarningWarning iconsvgsupport-warning
Warning messagetext colortext-primary
DisabledLabeltext color$text-disabled
Fieldbackground-color$field *
border-bottom (default)transparent
border-bottom (fluid)$border-subtle *
Numbertext color$text-disabled
Controlssvg color$icon-disabled
Read-onlyFieldbackground-color (default)transparent
background-color (fluid)$field *
border-bottom$border-subtle *
Numbertext color (default)$text-primary
text color (fluid)$text-secondary
Controlssvg color$icon-disabled
Default number input interactive states

Number input states example.


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

ElementFont-size (px/rem)Font-weightType token
Label12 / 0.75Regular / 400$label-01
Field input14 / 0.875Regular / 400$body-compact-01
Error message12 / 0.75Regular / 400$label-01
Warning message12 / 0.75Regular / 400$label-01
Helper text12 / 0.75Regular / 400$helper-text-01


Default input

The add and subtract icons can be found in the icons library.

ElementPropertypx / remSpacing token
Labelmargin-bottom8 / 0.5$spacing-03
Field (default)height40 / 2.5
Numberpadding-left16 / 1$spacing-05
Controlspadding-left, padding-right16 / 1$spacing-05
Structure and spacing for number input

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

Fluid input

ElementPropertypx / remSpacing token
Labelpadding-bottom4 / 0.25$spacing-02
Fieldheight64 / 4$spacing-10
padding-left, padding-right16 / 1$spacing-05
padding-top, padding-bottom13 / 0.8125
Add or substract iconheight, width16 / 1
padding-top, padding-bottom8 / 0.5$spacing-03
Structure and spacing for number input

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


Default input heights

The height varies for each size variant and 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