InputStepper

Enables incremental changes of a counter within a form.

When to use

  • To let users change small amounts of something and submit it.
  • For data such as the number of passengers on a trip.

When not to use

  • To change values not in a form—use a stepper.
  • For value that could change by a lot or irregularly—use an input field set to accept numbers.

Component status

Figma

React

iOS

Android

N/A
Released
N/A
N/A

Content structure

Label: provides a clear description of what users are adding/removing; value: displays the current value; decrement controller: decreases the value and to improve accessibility it's best to add a title describing the action; increment controller: increases the value and to improve accessibility it's best to add a title describing the action.

Content

Use labels

Labels serve to clearly present what’s expected. They’re especially important for people who don’t see other visual cues. But they also help everyone know exactly what to enter.

For the label, use short descriptive phrases, ideally nouns that make the request clear. See our patterns for form labels for some examples.

Use titles

So your stepper is useful even for people who don’t see visual cues, include titles for each increment button. This means using text like “Add a passenger” and “Remove a passenger” to make it clear directly in the button what the result of the button is.

Use error and help messages

For more complicated fields, sometimes labels aren’t enough. You want to include any necessary information as clear as possible to help users complete the fields.

Use help messages to guide users before they enter anything and clear calm error messages when there’s a problem with what they entered.

Remember that such messages are likely to invoke negative feelings, so be positive and focused on solutions to any problems.

Error and Help messages

Look & feel

Background color and borders

See why background and borders for fields differ between app and website versions.