InputStepper

Input steppers come in handy for letting users change small amounts of something, such as the number of passengers on a trip. They can choose specific values to submit.

If users should change the counter in a separate context, consider using a Stepper.

Component status

Figma

n/a

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Docs

Released

Content structure

Use labels

Labels serve to clearly present what is expected. They are especially important for people who won’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.

import InputStepper from "@kiwicom/orbit-components/lib/InputStepper";

() => (
  <div
    style={{
      maxWidth: "10em",
    }}
  >
    <InputStepper
      label="Travelers"
      minValue={1}
      defaultValue={2}
      maxValue={10}
      titleIncrement="Add a traveler"
      titleDecrement="Remove a traveler"
    />
  </div>
)

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.

Use help and error 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.

import InputStepper from "@kiwicom/orbit-components/lib/InputStepper";

() => (
  <div
    style={{
      maxWidth: "10em",
    }}
  >
    <InputStepper
      label="Travelers"
      minValue={1}
      defaultValue={2}
      maxValue={10}
      titleIncrement="Add a traveler"
      titleDecrement="Remove a traveler"
      help="At least 1 and no more than 10 travelers"
    />
  </div>
)

import InputStepper from "@kiwicom/orbit-components/lib/InputStepper";

() => (
  <div
    style={{
      maxWidth: "10em",
    }}
  >
    <InputStepper
      label="Travelers"
      minValue={1}
      defaultValue={12}
      maxValue={10}
      titleIncrement="Add a traveler"
      titleDecrement="Remove a traveler"
      help="At least 1 and no more than 10 travelers"
      error="Decrease the number of travelers to no more than 10"
    />
  </div>
)

Related components

Stepper

Input steppers work well in forms. For a stepper independent of surrounding context, such as in a popover, use a stepper.

InputField

Input steppers are great for values that might change only a little, like the number of passengers or bags. For values that need to change by a lot, use an input field with the input mode set to accept numbers.