Last modified: August 22, 2025
The StepperInput component renders a number input field that can be increased or decreased by a set number. This component inherits many of its props from the NumberInput component, with an additional set of props to control the increase/decrease interval.
ui-extension-component-stepper-input
import { StepperInput } from '@hubspot/ui-extensions';

return (
  <StepperInput
    min={5}
    max={20}
    minValueReachedTooltip="You need to eat at least 5 cookies."
    maxValueReachedTooltip="More than 20 cookies is a bit much."
    label="Number of cookies to eat"
    name="cookiesField"
    description={'I want cookies'}
    value={cookies}
    stepSize={5}
    onChange={(value) => {
      setCookieCount(value);
    }}
  />
);
PropTypeDescription
nameStringThe input’s unique identifier.
labelStringThe text that displays above the input.
stepSizeNumberThe amount that the current value will increase or decrease by. Default is 1.
minNumberThe lowest number allowed in the input.
maxNumberThe highest number allowed in the input.
minValueReachedTooltipStringText that will appear in a tooltip when the user has reached the minimum value.
maxValueReachedTooltipStringText that will appear in a tooltip when the user has reached the maximum value.
precisionNumberThe number of digits to the right of the decimal point.
formatStyle'decimal' (default) | 'percentage'Formats the number as a decimal or percentage.
valueStringThe value of the input.
defaultValueStringThe default input value.
placeholderStringText that appears in the input when no value is set.
requiredBooleanWhen set to true, displays a required field indicator. Default is false.
tooltipStringThe text that displays in a tooltip next to the label.
readOnlyBooleanWhen set to true, the checkbox cannot be selected. Default is false.
descriptionStringText that describes the field’s purpose.
errorBooleanWhen set to true, validationMessage is displayed as an error message if provided. The input will also render its error state to let the user know there’s an error. If left false (default), validationMessage is displayed as a success message.
validationMessageStringThe text to display if the input has an error.
onChange(value: number) => voidA callback function that is called with the new value or values when the list is updated.
onFocus(value: number) => voidA function that is called and passed the value when the field gets focused.
onBlur(value: number) => voidA function that is called and passes the value when the field loses focus.