Stepper

It’s great when you want users to incrementally change the amount of something. Without having an input there.

To implement Stepper component into your project you'll need to add the import:

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

After adding import into your project you can use it simply like:

<Stepper />

Props

Table below contains all types of the props available in Stepper component.

Name Type Default Description
dataTest string Optional prop for testing purposes.
defaultValue number 0 Specifies the value of the Stepper. See Functional specs
disabled boolean false If true, the Stepper will be disabled.
maxValue number Specifies the maximum value for the Stepper.
minValue number -∞ Specifies the minimum value for the Stepper.
name string The name for the Stepper.
onBlur event => void \| Promise Function for handling onBlur event.
onChange number => void \| Promise Function for handling onClick event.
onFocus event => void \| Promise Function for handling onFocus event.
step number 1 Specifies the value of step to increment and decrement.
titleDecrement string | (any => string) Specifies title property on decrement Button.
titleIncrement string | (any => string) Specifies title property on increment Button.

Functional specs

  • The prop defaultValue sets up the default value when component mounts. If you need to get the current value of Stepper, use arrow function for it. The second parameter name is optional. The code may look like this:
    <Stepper onChange={(value, name) => doSomething(value, name)} />

InputStepper offers a stateless version for your custom solutions. To use StepperStateless you'll need to add the import

import StepperStateless from "@kiwicom/orbit-components/lib/StepperStateless"

Props

Table below contains all types of the props available in StepperStateless component.

Name Type Default Description
dataTest string Optional prop for testing purposes.
defaultValue number 0 Specifies the value of the Stepper. See Functional specs
disabled boolean false If true, the Stepper will be disabled.
disabledIncrement boolean If true, the increment Button will be disabled.
disabledDecrement boolean If true, the decrement Button will be disabled.
maxValue number Specifies the maximum value for the Stepper.
minValue number -∞ Specifies the minimum value for the Stepper.
name string The name for the Stepper.
onBlur event => void \| Promise Function for handling onBlur event.
onChange number => void \| Promise Function for handling onClick event.
onDecrement event => void \| Promise Function for handling decrement event.l
onFocus event => void \| Promise Function for handling onFocus event.
onIncrement event => void \| Promise Function for handling increment event.
onKeyDown event => void \| Promise Function for handling onKeyDown event present on input.
step number 1 Specifies the value of step to increment and decrement.
titleDecrement string | (any => string) Specifies title property on decrement Button.
titleIncrement string | (any => string) Specifies title property on increment Button.
value number | string Specifies the value of the StepperStateless.

Usage:

<StepperStateless value={"2 adults"}/>

Helper functions

We provide you with helpers function for validation they can be imported like this:

import validateIncrement from "@kiwicom/orbit-components/lib/utils/validateIncrement";
import validateDecrement from "@kiwicom/orbit-components/lib/utils/validateDecrement";

ValidateIncrement

Helper function for validating increment. Can be used with Stateless Stepper to make custom validation easier.

Arguments
Name Type Default Description
value number Specifies the the current value.
maxValue number Specifies the maximum value for the InputStepperStateless.
step number 1 Specifies the value of step to increment and decrement.
Usage
validateIncrement({value, maxValue, step})

ValidateDecrement

Helper function for validating decrement. Can be used with Stateless Stepper to make custom validation easier.

Arguments
Name Type Default Description
value number Specifies the the current value.
minValue number -∞ Specifies the minimum value for the InputStepperStateless.
step number 1 Specifies the value of step to increment and decrement.
Usage
validateDecrement({value, minValue, step})