Stepper​

The Stepper UI component allows customers to increment or decrement numeric values seamlessly. Common usage includes adjusting quantities such as item counts.

Preview​

Code example​

render('Checkout::Dynamic::Render', (props) => {
  return <Stepper label="Quantity" max={5} min={0} step={1}></Stepper>;
});

StepperProps​

label​

Describes the intent of the stepper, such as Quantity for specifying the quantity.

max​

The maximum integer value allowed.

min?​

The minimum integer value allowed.

step?​

Increment value, a positive integer.

error?​

Used to display error messages for customers to view.

disabled?​

Indicates whether the stepper is disabled.

• true: Disabled
• false: Dvailable

readonly?​

Indicates whether the field is read-only. Valid values are:

• true: The field is read-only.
• false: The field is editable.

prefix?​

Text to display as a prefix, such as $ for currency symbols.

value?​

The controlled numeric value.

defaultValue?​

The uncontrolled initial numeric value.

onChange?​

Triggered when the value changes.

onFocus?​

Triggered when the input field gains focus.

onBlur?​

Triggered when the input field loses focus.