Number input

A Number Input allows users to increase or decrease a numeric value using buttons, with or without direct text input.

Figma component

Aero Global Foundation / Global Components

(update figma link once the component gets published)

How to use

Use a Number Input when users need to adjust a quantity or numeric value in small steps, such as selecting the number of items, passengers, or units.
The component provides clear controls to increment or decrement the value and helps avoid input errors by guiding users through predefined steps.

Types

The number input comes in two different styles to fit different use cases.

Input

This variant includes a text field between the two icon buttons where the users can manually enter a value in the field. Use this variant when users may need to enter a specific or large number quickly.

Minimal

This variant displays the value as a floating number between the two icon buttons. Users can only change the value using the buttons. Use this variant when the range is small and controlled, and free input is not needed.

Behavior

The minus (-) button decreases the value while the plus (+) button increases the value. Plus, minimum and maximum values can be defined to prevent invalid input.

Do’s and Don’ts

Example of a booking flow section displayed in two columns. On the left column, a label ‘Number of rooms’ is shown with a hint text ‘4 max’ below. Above the section, a message states ‘You can book up to 4 rooms for a total of 9 people’. On the right column, a Number Input displays the value 4, with the minus button enabled and the plus button disabled.

Clearly define minimum and maximum values.

ncorrect example of a booking flow section displayed in two columns. On the left column, a label ‘Number of rooms’ is shown with a hint text ‘4 max’ below. Above the section, a message states ‘You can book up to 4 rooms for a total of 9 people’. On the right column, a Number Input displays the value 6, which exceeds the allowed maximum.

Don't

Don't allow values that break business rules or logic.

Correct example of a group travel request section. A title ‘Make a group travel request’ is shown with a subtitle explaining that a group includes at least 10 passengers traveling together on the same dates and flights. An expandable titled ‘Make a group travel request’ is open. Inside, a Number Input labelled ‘Number of passengers’ uses the input style and displays the value 23, with minus and plus buttons on each side.

Use the version with field when precise input is required.

Incorrect example of a group travel request section. A title ‘Make a group travel request’ is shown with a subtitle explaining that a group includes at least 10 passengers traveling together on the same dates and flights. An expandable titled ‘Make a group travel request’ is open. Inside, a Number Input labelled ‘Number of passengers’ uses the minimal style and displays the value 23, with minus and plus buttons on each side.

Don't

Don't use the "minimal" style that requires the users to click many times if the expected value is a high one.

Accessibility

Ensure the buttons are keyboard accessible and usable with assistive technologies.

The current value should be announced when it changes.

Disable the minus or plus button when the minimum or maximum value is reached.

Content

Display only numeric values

Avoid additional symbols or text inside the value area.

Availability

Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.

Blueweb

iOS

Android

Kiosk

Design status

Ready