Stepper

Enables incremental changes of a counter without a direct input.

Stepper

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.

NameTypeDefaultDescription
dataTeststringOptional prop for testing purposes.
idstringSet id for Stepper
maxWidthboolean108pxSet max-widthfor Stepper wrapper
activebooleanChanges the color of the Stepper
defaultValuenumber0Specifies the value of the Stepper. See Functional specs
disabledbooleanfalseIf true, the Stepper will be disabled.
maxValuenumberSpecifies the maximum value for the Stepper.
minValuenumber-∞Specifies the minimum value for the Stepper.
namestringThe name for the Stepper.
onBlurevent => void \| PromiseFunction for handling onBlur event.
onChangenumber => void \| PromiseFunction for handling onClick event.
onFocusevent => void \| PromiseFunction for handling onFocus event.
stepnumber1Specifies the value of step to increment and decrement.
titleDecrementstring \| (any => string)Specifies title property on decrement Button.
titleIncrementstring \| (any => string)Specifies title property on increment Button.

size

size
"small"
"normal"

Functional specs

  • The prop defaultValue sets the default value when the component mounts. If you need to get the current value of the Stepper, use an arrow function.
<Stepper onChange={value => doSomething(value)} />

StepperStateless

Stepper offers a stateless version for your custom solutions. To use StepperStateless, you need to import it.

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

Props

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

NameTypeDefaultDescription
dataTeststringOptional prop for testing purposes.
disabledbooleanfalseIf true, the Stepper will be disabled.
disabledIncrementbooleanIf true, the increment Button will be disabled.
disabledDecrementbooleanIf true, the decrement Button will be disabled.
maxValuenumberSpecifies the maximum value for the Stepper.
minValuenumber-∞Specifies the minimum value for the Stepper.
namestringThe name for the Stepper.
onBlurevent => void \| PromiseFunction for handling onBlur event.
onChangenumber => void \| PromiseFunction for handling onClick event.
onDecrementevent => void \| PromiseFunction for handling decrement event.l
onFocusevent => void \| PromiseFunction for handling onFocus event.
onIncrementevent => void \| PromiseFunction for handling increment event.
onKeyDownevent => void \| PromiseFunction for handling onKeyDown event present on input.
stepnumber1Specifies the value of step to increment and decrement.
titleDecrementstring \| (any => string)Specifies title property on decrement Button.
titleIncrementstring \| (any => string)Specifies title property on increment Button.
valuenumber \| stringSpecifies 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

NameTypeDefaultDescription
valuenumberSpecifies the the current value.
maxValuenumberSpecifies the maximum value for the InputStepperStateless.
stepnumber1Specifies 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

NameTypeDefaultDescription
valuenumberSpecifies the the current value.
minValuenumber-∞Specifies the minimum value for the InputStepperStateless.
stepnumber1Specifies the value of step to increment and decrement.

Usage

validateDecrement({ value, minValue, step });