---
title: "Vue Forms Stepper Example | Mobiscroll"
component: "Forms"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/forms/stepper"
---

# Stepper - Vue Forms demo

Vue stepper example with fixed/custom steps and editable values. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/forms/stepper)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/form-components/forms/stepper)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/form-components/forms/stepper)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/stepper.md), [jQuery](https://demo.mobiscroll.com/jquery/forms/stepper.md), [Angular](https://demo.mobiscroll.com/angular/forms/stepper.md), [React](https://demo.mobiscroll.com/react/forms/stepper.md)

## Description

Use the stepper to enable controlled increasing and decreasing of values. Configure the steps and choose to provide an input for manual entry.

## What this demo shows

- This demo shows a stepper example where the user can nncrease or decrease numeric values with dedicated stepper buttons.
- **Manual entry** Use an input field to enter a value directly when manual entry is enabled.
- **Configurable increments** Set the amount by which the value changes with each step.
- **Multiple categories** Use separate steppers for values such as the number of adults, children, and infants.
- **Current value** Display the selected value alongside the increment and decrement controls.
- **Layouts** Arrange the value and stepper buttons in different layouts.
- **Minimum value** Disable the decrement button when the configured minimum value is reached.

## Best for

- **Guest selectors** Set the number of adults, children, and infants in booking or reservation forms.
- **Product quantities** Adjust item counts in shopping carts and order forms.
- **Bounded numeric settings** Change values that must stay within a defined minimum and maximum.
- **Increment-based values** Select quantities that change in fixed steps, such as duration, capacity, or units.
- **Compact forms** Provide quick numeric adjustments without requiring keyboard input.

## Tutorial

```vue
<MbscStepper label="Adults" description="From 14 years" :min="1" :defaultValue="1" :max="15" />
<MbscStepper label="Children" description="2-14 years" inputPosition="start" :max="15" />
<MbscStepper label="Infant" description="0-2 years" inputPosition="start" :max="10" />
```

## Code

### SFC JS

```vue
<script setup>
import { MbscPage, MbscStepper, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Passengers</div>
      <MbscStepper
        label="Adults"
        description="From 14 years"
        :min="1"
        :defaultValue="1"
        :max="15"
      />
      <MbscStepper label="Children" description="2-14 years" inputPosition="start" :max="15" />
      <MbscStepper label="Infant" description="0-2 years" inputPosition="start" :max="10" />
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscPage, MbscStepper, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Passengers</div>
      <MbscStepper
        label="Adults"
        description="From 14 years"
        :min="1"
        :defaultValue="1"
        :max="15"
      />
      <MbscStepper label="Children" description="2-14 years" inputPosition="start" :max="15" />
      <MbscStepper label="Infant" description="0-2 years" inputPosition="start" :max="10" />
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- `min` sets the lowest selectable value; the decrement button disables automatically once the value reaches it (e.g. `min={1}` on the Adults stepper).
- `max` sets the highest selectable value; the increment button disables automatically once the value reaches it (e.g. `max={15}`).
- The starting value is set via `value`/`defaultValue` (React `defaultValue={1}`; JS/jQuery `value="1"` attribute; Angular/Vue default to `0` when omitted).
- `label` sets the field title text shown above/beside the stepper (JS/jQuery: `data-label` attribute on the `<input mbsc-stepper>`).
- `description` sets secondary helper text shown under the label (JS/jQuery: `data-description` attribute).
- `inputPosition` controls where the numeric value/input sits relative to the increment/decrement buttons; set to `'start'` to place it before the buttons (default is after).
- Manual entry into the value field is enabled by default - the current value renders as an editable input between the two buttons, not just a static number.
- Framework markup differences: JS/jQuery wraps a plain `<input mbsc-stepper>` in a `<label>` with `data-*` attributes for all options; React uses `<Stepper label="..." description="..." min={1} max={15} defaultValue={1} inputPosition="start" />`; Angular uses `<mbsc-stepper label="..." description="..." [min]="1" [max]="15" inputPosition="start">`; Vue uses `<MbscStepper label="..." description="..." :min="1" :max="15" :defaultValue="1" inputPosition="start" />`.
- Multiple independent steppers (e.g. Adults, Children, Infant) are separate component instances grouped in one `mbsc-form-group`/`Page` container - each keeps its own `min`/`max`/value state.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Segmented](https://demo.mobiscroll.com/vue/forms/segmented.md) - Vue segmented control with single & multiple select for radio buttons and checklists. It supports icons, text, colors.
- Next: [Colors](https://demo.mobiscroll.com/vue/forms/button-segmented-stepper-colors.md) - Vue button, segmented and stepper with color presets for primary, secondary, success, danger and more.