Intro

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

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { Stepper } from 'vant';

const app = createApp();
app.use(Stepper);

Basic Usage

<van-stepper v-model="value" />

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(1);
    return { value };
  },
};

Step

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

Range

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

Integer

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

Disabled

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

Disable Input

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

Decimal Length

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

Custom Size

<van-stepper v-model="value" input-width="40px" button-size="32px" />

Before Change

<van-stepper v-model="value" :before-change="beforeChange" />

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const value = ref(1);

    const beforeChange = (value) => {
      Toast.loading({ forbidClick: true });

      return new Promise((resolve) => {
        setTimeout(() => {
          Toast.clear();
          // resolve 'true' or 'false'
          resolve(true);
        }, 500);
      });
    };

    return {
      value,
      beforeChange,
    };
  },
};

Round Theme

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

Props

Attribute	Description	Type	Default
v-model	Current value	number \| string	-
min	Min value	number \| string	`1`
max	Max value	number \| string	-
default-value	Default value, valid when v-model is empty	number \| string	`1`
step	Value change step	number \| string	`1`
name	Stepper name, usually a unique string or number	number \| string	-
input-width	Input width	number \| string	`32px`
button-size	Button size	number \| string	`28px`
decimal-length	Decimal length	number \| string	-
theme	Theme, can be set to `round`	string	-
placeholder	Input placeholder	string	-
integer	Whether to allow only integers	boolean	`false`
disabled	Whether to disable value change	boolean	`false`
disable-plus	Whether to disable plus button	boolean	`false`
disable-minus	Whether to disable minus button	boolean	`false`
disable-input	Whether to disable input	boolean	`false`
before-change	Callback function before changing, return `false` to prevent change, support return Promise	(value: number \| string) => boolean \| Promise<boolean>	`false`
show-plus	Whether to show plus button	boolean	`true`
show-minus	Whether to show minus button	boolean	`true`
show-input	Whether to show input	boolean	`true`
long-press	Whether to enable the long press gesture, when enabled you can long press the increase and decrease buttons	boolean	`true`
allow-empty	Whether to allow the input value to be empty, set to `true` to allow an empty string to be passed in	boolean	`false`

Events

Event	Description	Arguments
change	Emitted when value changed	value: string, detail: { name: string }
overlimit	Emitted when a disabled button is clicked	-
plus	Emitted when the plus button is clicked	-
minus	Emitted when the minus button is clicked	-
focus	Emitted when the input is focused	event: Event
blur	Emitted when the input is blurred	event: Event

Types

The component exports the following type definitions:

import type { StepperTheme, StepperProps } from 'vant';

CSS Variables

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

Name	Default Value	Description
--van-stepper-background-color	var(--van-active-color)	-
--van-stepper-button-icon-color	var(--van-text-color)	-
--van-stepper-button-disabled-color	var(--van-background-color)	-
--van-stepper-button-disabled-icon-color	var(--van-gray-5)	-
--van-stepper-button-round-theme-color	var(--van-danger-color)	-
--van-stepper-input-width	32px	-
--van-stepper-input-height	28px	-
--van-stepper-input-font-size	var(--van-font-size-md)	-
--van-stepper-input-line-height	normal	-
--van-stepper-input-text-color	var(--van-text-color)	-
--van-stepper-input-disabled-text-color	var(--van-text-color-3)	-
--van-stepper-input-disabled-background-color	var(--van-active-color)	-
--van-stepper-border-radius	var(--van-border-radius-md)	-

Stepper