Skip to main contentCarbon Design System

Number input

The following page documents visual specifications such as color, typography, structure, size, and AI presence.

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.

Default number input example

Interactive states

StateElementPropertyColor token
HoverControlsbackground-colorfield-hover *
FocusFieldborder$focus
Controlsborder$focus
InvalidFieldborder$support-error
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.

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

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

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

AI presence

The following are the unique styles applied to the component when the AI label is present. Unless specified, all other tokens in the component remain the same as the non-AI variant.

For more information on the AI style elements, see the Carbon for AI guidelines.

ElementPropertyToken / Size
Linear gradientstart$ai-aura-start-sm
stop$ai-aura-stop
Fieldborder-bottom$ai-border-strong
background color$field*
AI labelsizemini

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

Default number input AI example