StepperInput - HubSpot docs

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.

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

Props

Prop	Type	Description
`defaultValue`	String	The default input value.
`description`	String	Text that describes the field’s purpose.
`error`	Boolean	When 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.
`formatStyle`	`'decimal'` (default) \| `'percentage'`	Formats the number as a decimal or percentage.
`label`	String	The text that displays above the input.
`max`	Number	The highest number allowed in the input.
`maxValueReachedTooltip`	String	Text that will appear in a tooltip when the user has reached the maximum value.
`min`	Number	The lowest number allowed in the input.
`minValueReachedTooltip`	String	Text that will appear in a tooltip when the user has reached the minimum value.
`name`	String	The input’s unique identifier.
`onBlur`	`(value: number) => void`	A function that is called and passes the value when the field loses focus.
`onChange`	`(value: number) => void`	A callback function that is called with the new value or values when the list is updated.
`onFocus`	`(value: number) => void`	A function that is called and passed the value when the field gets focused.
`placeholder`	String	Text that appears in the input when no value is set.
`precision`	Number	The number of digits to the right of the decimal point.
`readOnly`	Boolean	When set to `true`, the checkbox cannot be selected. Default is `false`.
`required`	Boolean	When set to `true`, displays a required field indicator. Default is `false`.
`stepSize`	Number	The amount that the current value will increase or decrease by. Default is `1`.
`tooltip`	String	The text that displays in a tooltip next to the label.
`validationMessage`	String	The text to display if the input has an error.
`value`	String	The value of the input.

​Props

​Related components

Props

Related components