Stepper stepper


The stepper consists of an increase button, a decrease button and an input box, which is used to input and adjust numbers within a certain range.

Code Demo

Basic usage

By binding the input value with v-model, you can monitor changes in the input value through the change event.

<z-stepper v-model="value" />
import { ref } from 'vue';
const value = ref(1);

Step size setting

Use the step attribute to set the value that changes each time the increase or decrease button is clicked. The default is 1.

<z-stepper v-model="value" step="2" />

Limit input range

Limit the range of the input value through the min and max attributes. By default, the maximum or minimum value will be automatically corrected after exceeding the range. Automatic correction can be turned off by auto-fixed.

<z-stepper v-model="value" min="5" max="8" />

Limit input to integers

After setting the integer attribute, the input box will be restricted to only integers.

<z-stepper v-model="value" integer />

Disabled state

Disable the stepper by setting the disabled attribute. In the disabled state, you cannot click the button or modify the input box.

<z-stepper v-model="value" disabled />

Disable input box

Disable the input box by setting the disable-input attribute, while the button is still clickable.

<z-stepper v-model="value" disable-input />

Fixed number of decimal places

A fixed number of decimal places can be preserved by setting the decimal-length property.

<z-stepper v-model="value" step="0.2" :decimal-length="1" />

Custom size

Set the input box width through the input-width property, and set the button size and input box height through the button-size property.

<z-stepper v-model="value" input-width="80rpx" button-size="64rpx" />

Asynchronous changes

The before-change attribute can be used to verify and intercept the input value before it changes.

<z-stepper v-model="value" :before-change="beforeChange" />
import { ref } from 'vue'
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const beforeChange = () => {
toast.showLoadingToast({ forbidClick: true })

return new Promise((resolve) => {
setTimeout(() => {
}, 1000)

Rounded corner style

Set theme to round to display a rounded style stepper.

<z-stepper v-model="value" theme="round" button-size="22" disable-input />



ParametersDescriptionTypeDefault value
v-modelCurrent input valuenumber | string-
minminimum valuenumber | string1
maxmaximum valuenumber | string-
auto-fixedWhether to automatically correct values that exceed the limit range. If set to false, input values that exceed the limit range will not be automatically correctedbooleantrue
default-valueInitial value, effective when v-model is emptynumber | string1
stepStep size, the value changed each time you clicknumber | string1
nameIdentifier, usually a unique string or number, can be obtained in the change event callback parameternumber | string-
input-widthInput box width, default unit is pxnumber | string64rpx
button-sizeButton size and input box height, default unit is pxnumber | string56rpx
decimal-lengthFixed number of displayed decimal placesnumber | string-
themestyle, optional value is roundstring-
placeholderInput box placeholder prompt textstring-
integerWhether to only allow integers to be enteredbooleanfalse
disabledWhether to disable the stepperbooleanfalse
disable-plusWhether to disable the add buttonbooleanfalse
disable-minusWhether to disable the reduce buttonbooleanfalse
disable-inputWhether to disable the input boxbooleanfalse
before-changeCallback function before the input value changes. Return false to prevent input and support returning Promise(value: number | string) => boolean | Promise\ false
show-plusWhether to display the add buttonbooleantrue
show-minusWhether to display the reduce buttonbooleantrue
show-inputWhether to display the input boxbooleantrue
long-pressWhether to enable long press gestures. After enabling, you can long press the increase and decrease buttonsbooleantrue
allow-emptyWhether to allow the input value to be empty, set to true to allow empty strings to be passed inbooleanfalse


Event nameDescriptionCallback parameters
changeEvent triggered when the binding value changesvalue: string, detail: { name: string }
overlimitFired when an unavailable button is clicked-
plusTriggered when the add button is clicked-
minusTriggered when the reduce button is clicked-
focusTriggered when the input box is focusedevent: Event
blurTriggered when the input box is out of focusevent: Event

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.