Skip to main content

Input Stepper

Component
Live

The Input Stepper component provides a simple and quick way for users to increase and decrease numeric values with precision.

Figma(opens in new window)Code(opens in new window)

Usage​

The Input Stepper is a form control that allows users to increase or decrease a numeric value using plus (+) and minus (–) buttons, or by typing directly into the input field. Input Steppers help prevent input errors and provide a more visual and interactive way for users to enter numerical values.

Installation​

Install

yarn add @iag/chroma-react-ui.components
// OR
yarn add @iag/chroma-react-ui.input-stepper

Import

import { InputStepper } from "@iag/chroma-react-ui.components";
// OR
import { InputStepper } from "@iag/chroma-react-ui.input-stepper";

When to use​

Use Input Steppers when:

  • Users need to input a numeric value within the small known range, ie. 0 to 10.
  • Incremental changes are meaningful and precision is required.

When to avoid​

Avoid using Input Steppers when:

  • The range is larger than 10 or unpredictable, consider using Input component instead.
  • The input could be a fraction or decimal, consider using Input component instead.
  • Values are not part of a range or require complex formatting, consider using Input Format component instead.

Do

  • Do always use whole numbers.
  • Do use clear labels and context so users understand what the number represents (e.g., “Number of bathrooms”).
  • Do display a default value in the input field as a starting point for users to modify.
  • Do set appropriate min and max values to guide user input, avoiding use for values over 10.
  • Do provide help text for additional context where critical. Including to alert users to a max value so they can avoid errors.
  • Do use informative error messages for easier correction.

Don't

  • Don’t use decimals when increasing or decreasing.