Developer mode
Opens components on the React tab by default.
Your bookmarks

Stepper

Enables incremental changes of a counter without a direct input.

Steppers come in handy for letting users change small amounts of something in a separate context. When you have popovers or other places you need people to choose specific values, use a Stepper to give them simple and clear interactions.

If users should change a counter in a form, use an input stepper.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Component structure

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.

Guidelines       

Make the value clear

A stepper by itself only presents a number. Make sure it’s clear from context what the value refers to and what users are changing by incrementing in either direction.

You can do this with text, icons, or other clues nearby to show the full context of the number. 

import Stack from "@kiwicom/orbit-components/lib/Stack";
import Stepper from "@kiwicom/orbit-components/lib/Stepper";
import Heading from "@kiwicom/orbit-components/lib/Heading";
import Passengers from "@kiwicom/orbit-components/lib/icons/Passengers";
() => (
  <Stack flex align="center">
    <Heading type="title4">
      <Passengers />
      Travelers
    </Heading>
    <div
      style={{
        maxWidth: "10em",
      }}
    >
      <Stepper
        defaultValue={2}
        maxValue={10}
        minValue={1}
        titleIncrement="Add a traveler"
        titleDecrement="Remove a traveler"
      />
    </div>
  </Stack>
)

Use titles

So your stepper is useful even for people who won’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.

Related components

InputStepper

Steppers work well independent of surrounding context, such as in a popover. For a stepper in a form, use an input stepper.