Stepper Design system

Increase or decrease a number in clear steps.

7 checks · 3 content groups

Checklist contents

Review progress

Structure and meaning

Compare information and presentation in context of use.

State the value being adjustedSet the label and unit for the number box with an increase or decrease button.People who need large values should have a way to enter directly, without having to press dozens of times.Example Quantity: enter 12 or use the “Increase quantity” and “Decrease quantity” buttons.Definition of incrementKeep each click changed to the appropriate unit or step.State the step unit and try multiple consecutive presses so that the number still increases or decreases according to convention.Reflects min and maxStop at the limit, state the reason and status of the button that is no longer usable.When the limit is reached, keep the button in the same position and reflect the unusable state instead of making the button disappear.

Interaction and usability

Try the operation, change the status and continue working.

Check the number entered directlyHandles letters, negative numbers, decimals and out-of-range values without changing silently.Allow direct input when many changes are needed; report an invalid value instead of silently converting it to another number.Use the keyboardSupports focus, buttons and keys to adjust properly with numeric input.Try arrows, tabs and button operations so users can adjust numbers without using the mouse.Update relevant resultsWhen number changes affect prices or totals, report results immediately in the correct area.If the amount changes to the total amount or other data, the response must be with the new value and keep the state when updating the error.

Complete the experience

Check for details that are easy to miss when putting the design into use.

Choose control sizes for the contextIf small and large variants are available, maintain usable target areas, legible numbers, and a balanced layout between the input and its two buttons.The version used in thick panels must still be able to be operated by touch and not make the increase and decrease buttons difficult to distinguish.

Progress is saved automatically in this browser.

GUIDANCE

How to review

State the value being adjusted

People who need large values should have a way to enter directly, without having to press dozens of times.

EXAMPLES

Usage examples

State the value being adjusted

Quantity: enter 12 or use the “Increase quantity” and “Decrease quantity” buttons.

Stepper Design system

Structure and meaning

Interaction and usability

Complete the experience

How to review

State the value being adjusted

Usage examples

State the value being adjusted

Find a checklist

No checklists found