Stepper

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

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";

(): React.Node => (
  <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.