Components
Stepper

Stepper

Stepper is an intuitive way to increase or decrease a numeric value, allowing users to easily change the numeric value as desired when the value has little deviation from the default.

Figma
Default
Disable
Min Value
Max Value
Step Value

Usage

import { Stepper } from "@momo-webplatform/mobase";
<Stepper value={10} min={2} step={2} max={20} />
Note use functions:
  • onIncrement , onDecrement use this function to handle increasing or decreasing values
  • onChangeInputStepper use this function to handle increasing or decreasing values in Input

NOTE: Initial value must >= minimum value

  • EX : <Stepper min={5} value={5} /> ( ✅ Do this )

  • EX : <Stepper min={5} value={3} /> ( ❌ Don't do this )

API Reference

Stepper component extends HTML Input Element and supports all of its props.

Stepper
PropTypeDefaultRequired
value
number 0 false
min
number 0 false
max
number 999 false
step
number 1 false
inputClassName
string false
stepperClassName
string false
disabledInput
enumboolean false false
disabled
enumboolean false false
onChangeInputStepper
(inputValue: string | number) => void--false
onDecrement
(inputValue: string | number) => void--false
onIncrement
(inputValue: string | number) => void--false

Best practices

Use stepper to increase or decrease the value in the count field.
  • Stepper values can only be zero and positive integers.
  • Common situations: changing the number of products purchased, changing the number of customer actions when buying tickets...
  • Can increase/decrease by 1 unit for each action (eg: +5, -5, +10, -10,...)
  • Exact values can be entered using a text field
TabsText Area