Skip to main contentCarbon Design System

Number input

Color

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.

Number input example

Number input example.

Interactive states

ElementPropertyColor token
Controls:hoverbackground-colorfield-hover *
Field:focusborder$focus
Controls:focusborder$focus
Field:invalidborder$support-error
Error iconsvg$support-error
Error messagetext color$text-error
Warning iconsvgsupport-warning
Warning messagetext colortext-primary
Label:disabledtext color$text-disabled
Field:disabledbackground-color$field *
border-bottomtransparent
Numbertext color$text-disabled
Number input states example

Number input states example.

Typography

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$code-02
Error message12 / 0.75Regular / 400$label-01

Structure

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–
border-bottom1px–
Numberpadding-left16 / 1$spacing-05
Controlspadding-left, padding-right16 / 1$spacing-05
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