Stepper

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

React API

Github

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})