Number Stepper React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import NumberStepper from "./NumberStepper";

export default function Example() {
  return (
    <NumberStepper
      defaultValue={3}
      min={0}
      max={12}
      step={1}
      label={"EDITION SIZE"}
      color={"#e7c9a6"}
      background={"#27221e"}
      disabled={false}
    />
  );
}

Using Number Stepper

Set min, max, and step for the values your application accepts. label explains the quantity being changed.

Use value with onValueChange for form state, or defaultValue for an initial local value. The spinbutton supports arrow keys as well as Home and End.

Props

Name	Type	Required	Default	Description
value	number	No	undefined	Optional controlled numeric value.
defaultValue	number	No	1	Initial value when uncontrolled.
onValueChange	function	No	undefined	Called with the clamped numeric value after a change.
min	number	No	0	Inclusive lower bound.
max	number	No	99	Inclusive upper bound, clamped to at least min.
step	number	No	1	Positive increment; invalid steps use one.
label	string	No	"Quantity"	Visible and accessible label.
disabled	boolean	No	false	Disable all input.
color	string	No	"#e7c9a6"	Text and focus colour.
background	string	No	"#27221e"	Control surface colour.
decreaseLabel	string	No	"Decrease"	Accessible minus button label.
increaseLabel	string	No	"Increase"	Accessible plus button label.
className	string	No	""	Additional classes for the root element.
style	CSSProperties	No	undefined	Inline styles for caller-defined size, typography, and appearance.