Input [Stepper / Number]

Overview

Input Stepper is a numeric entry component with built-in increment and decrement controls. Four distinct control layouts cover every placement need, from inline split controls to fully detached steppers. It's built from the same label, helper, and inner input system as the rest of the input family, so it fits any form without adjustment.

When should you use them?

Use a number stepper when a user adjusts a numeric value in small, predictable steps, such as a quantity, a guest count, or a setting. The increment and decrement controls make small changes fast, while still allowing direct typing for larger jumps.

How should you use them?

• Use a stepper for bounded numeric values that change in small steps, like quantity or count.
• Choose the control layout for your space: Split or End Controls inline, Vertical or Detached for tighter layouts.
• Set sensible min, max, and step values so users can't enter an invalid number.
• Still allow direct keyboard entry for users who want to type a value instead of stepping.
• Use the Error state with a clear message when a value is out of range.
• Keep the increment and decrement controls keyboard-accessible and labeled for screen readers.