Design System

Foundations

Components

Patterns

AI

FAQs

Design System

Design System

Number Input

23.5

The Number Input component is an input field designed for numerical data entry.

Number Input

23.5

The Number Input component is an input field designed for numerical data entry.

Design Library

React Library

Spec Doc

Overview

The Number Input component is a specialized input field designed for numerical data entry. It provides controls for incrementing and decrementing values, ensuring users can only enter valid numerical values.

Usage

Use the Number Input component when:

  • You need users to enter a specific numerical value

  • The input requires validation within a numerical range

  • Users benefit from increment/decrement controls for precise adjustments

  • You need to enforce number formatting (decimals, units, etc.)

Anatomy

  1. Input field: The main area where users can type numerical values

  2. Increment button: Increases the current value by a predefined step

  3. Decrement button: Decreases the current value by a predefined step

  4. Label: Identifies the purpose of the input field

  5. Helper text (optional): Provides additional context about the expected input

  6. Error message (optional): Displays validation errors

  7. Unit display (optional): Shows the measurement unit associated with the value

Variants & Props

  • Min/Max Values: Optional range constraints for the input

  • Step Value: Amount to increment/decrement when using controls (default: 1)

  • Default Value: Initial value when the input is rendered

  • Decimal Precision: Number of decimal places to allow/display

  • Size Variants: Standard or compact sizing

  • Disabled State: Non-interactive state

  • Error State: Indicates validation issues

  • Unit Display: Optional suffix showing measurement units

Content Guidelines

Number inputs allow users to enter numeric values such as limits, counts, sizes, or thresholds.

The content around number fields must clearly communicate what value is required, in what unit, and within which range, if there is any such constraint.

We follow these basic rules while writing content for number inputs:

Labels

  • Use clear and concise labels that describe exactly what number the user needs to enter.

  • Avoid vague terms that might require additional information.

Units of measurement

  • Include units of measurement in the label or as a suffix when applicable.

  • Write units as used in the product (for example, GB, vCPUs, ms).

  • Do not spell out units unless required.

Ranges and constraints

  • For range-limited inputs, display the allowed range in the help or inline text.

  • Make sure the constraints are highlighted in a way that they are clearly visible before the user enters a value.

Number formatting

  • Do not use a leading zero for single-digit numbers.
    ✅ 5
    ❌ 05

Accessibility

General

  • Provide engineers with labels for the decrease/increase controls

  • All inputs must have a visible and programmatic label

Formatting

Formatting requirements should be displayed in a persistent manner (not as placeholder text that is replaced as the user enters data)

Use of Color

Error and warning messages should use appropriate icons with text as to not rely on color as the only means of indicating error.


Keyboard Interaction

  • Up/Down arrows to increment/decrement values

  • Home/End keys to set min/max values

  • Tab navigation between the input field and controls

  • Ensuring screen readers announce value changes when using increment/decrement controls

Help make this page more useful.

Send Feedback

Help make this page more useful.

Send Feedback

‹ Notification

Password Input ›