Version: 3.0.3

NumberInput

The NumberInput component is similar to the Input component, but it has controls for incrementing or decrementing numeric values.

Implements#

Examples#

Basic#

Default Value#

Min Max#

Steps#

Form Controlled#

Props#

NumberInputField#

NameTypeDescriptionDefault
valuenumberThe value of the input for controlled usage. Should be less than max and greater than min.-
defaultValuenumberThe initial value of the input. Should be less than max and greater than min.-
onChangefunctionThe callback fired when the value changes.
minnumberThe minimum value of the input.
maxnumberThe maximum value of the input.
stepnumberThe step used to increment or decrement the value.
isDisabledbooleanIf true, the input will be disabled.
keepWithinRangebooleanIf true and you use the stepper or up/down arrow keys, the value will not exceed the max or go lower than min.
focusInputOnChangebooleanIf true, the input will be focused as you increment or decrement the value with the stepper.

NumberInput composes Input so you can pass all the Input props.

NumberInputStepper#

NumberInputStepper composes VStack so you can pass all the VStack props.

NumberDecrementStepper and NumberIncrementStepper#

NumberDecrementStepper and NumberIncrementStepper composes the Box props so you can pass all the Box props.

NumberDecrementStepper and NumberIncrementStepper#

NameTypeDescriptionDefault
_disabledStylePropsPass custom style object for disabled state-
_activeStylePropsPass custom style object for active state-