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





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.