InputStepper

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

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

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

<InputStepper />

Props

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

Name	Type	Default	Description
defaultValue	number	0	Specifies the value of the InputStepper. See Functional specs
disabled	boolean	false	If true, the InputStepper will be disabled.
error	React.Node		The error to display beneath the InputStepper. See Functional specs
help	React.Node		The help to display beneath the InputStepper.
label	Translation		The label for the InputStepper. See Functional specs
maxValue	number	∞	Specifies the maximum value for the InputStepper.
minValue	number	-∞	Specifies the minimum value for the InputStepper.
name	string		The name for the InputStepper.
required	boolean	false	If true, the label is displayed as required.
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.
ref	func		Prop for forwarded ref of the InputStepper. See Functional specs
size	enum	"normal"	The size of the InputStepper.
spaceAfter	enum		Additional margin-bottom after component. See this docs
step	number	1	Specifies the value of step to increment and decrement.
tabIndex	string		Specifies the tab order of an element
titleDecrement	string | (any => string)		Specifies title property on decrement Button.
titleIncrement	string | (any => string)		Specifies title property on increment Button.

enum

size
"small"
"normal"

Functional specs

• The error prop overwrites the help prop, due to higher priority.

• The color of the label will turn into cloud shade when the InputStepper has some filled value.

• The prop defaultValue sets up the default value when component mounts. If you need to get the current and validated value of InputStepper, use arrow function for it, e.g.:

  <InputStepper onChange={(value) => doSomething(value)} />

• ref can be used for example auto-focus the elements immediately after render.

  class Component extends React.PureComponent<Props> {
  &nbsp;
  componentDidMount() {
    this.ref.current && this.ref.current.focus();
  }
  &nbsp;
  ref: { current: React$ElementRef<*> | null } = React.createRef();
  &nbsp;
  render() {
    return (
      <InputStepper ref={this.ref} />
    )
  }
  }

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

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

Props

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

Name	Type	Default	Description
disabled	boolean	false	If true, the InputStepperStateless will be disabled.
disabledIncrement	boolean		If true, the increment Button will be disabled.
disabledDecrement	boolean		If true, the decrement Button will be disabled.
error	React.Node		The error to display beneath the InputStepperStateless. See Functional specs
help	React.Node		The help to display beneath the InputStepperStateless.
label	Translation		The label for the InputStepperStateless. See Functional specs
maxValue	number	∞	Specifies the maximum value for the InputStepperStateless.
minValue	number	-∞	Specifies the minimum value for the InputStepperStateless.
name	string		The name for the InputStepperStateless.
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.
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.
ref	func		Prop for forwarded ref of the InputStepperStateless. See Functional specs
required	boolean	false	If true, the label is displayed as required.
size	enum	"normal"	The size of the InputStepperStateless.
spaceAfter	enum		Additional margin-bottom after component. [See this docs](https://github.com/kiwicom/orbit-comp onents/tree/master/src/common/getSpacingToken)
step	number	1	Specifies the value of step to increment and decrement.
tabIndex	string		Specifies the tab order of an element
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 InputStepperStateless.

Usage:

<InputStepperStateless 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

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