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

Design specifications of the number input component
Design specifications of the number input component

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.

Input states example
Input states example

Spin button

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

Spin button states example
Spin button states example

Anatomy

Anatomy of the number input component
  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