Number Input

The number input is a text input component that only allows numerical values and it has controls for incrementing or decrementing them.

Specifications

Number input design specifications
Number input design specifications

The number input color, typography, border, spacing, width and margin specifications are inherited from the text input, for reference check the text input component documentation.

States

Input

States: enabled, hover, focus, error and disabled.

Number input states
Number input states

Spin button

States: enabled, hover, focus, active and disabled.

Spin button states
Spin button states

Anatomy

Number input anatomy
  1. 1.
    Label
  2. 2.
    Helper text (Optional)
  3. 3.
    Suffix (Optional)
  4. 4.
    Container
  5. 5.
    Spin button increase
  6. 6.
    Spin button decrease
  7. 7.
    Error indicator
  8. 8.
    Error message
  9. 9.
    Value

Accessibility

WAI-ARIA