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.

Fluid 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-bottom (fixed)transparent
border-bottom (fluid)$border-subtle *
Number:disabledtext color$text-disabled
Controls:disabledsvg color$icon-disabled
Fixed number input interactive states

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$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

Structure

Fixed 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
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 fixed 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
border-bottom1px
Add or substract iconheight, width16 / 1
Focusborder2px
Errorborder2px
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

Sizes

Fixed 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