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

# Stepper - JavaScript Forms demo

Javascript stepper example with fixed/custom steps and editable values. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/forms/stepper)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/form-components/forms/stepper)
- This demo in other frameworks: [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), [Vue](https://demo.mobiscroll.com/vue/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

```html
<label>
    <input mbsc-stepper data-label="Adults" data-description="From 14 years" min="1" value="1" max="15" />
</label>
<label>
    <input mbsc-stepper data-label="Children" data-description="2-14 years" max="15" data-input-position="start" />
</label>
<label>
    <input mbsc-stepper data-label="Infant" data-description="0-2 years" data-input-position="start" max="10" />
</label>
```

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});
```

### HTML

```html
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Passengers</div>
    <label>
        <input mbsc-stepper data-label="Adults" data-description="From 14 years" min="1" value="1" max="15" />
    </label>
    <label>
        <input mbsc-stepper data-label="Children" data-description="2-14 years" max="15" data-input-position="start" />
    </label>
    <label>
        <input mbsc-stepper data-label="Infant" data-description="0-2 years" data-input-position="start" max="10" />
    </label>
</div>
```

## 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-javascript.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 javascript
   ```

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 javascript --trial`.

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

## Related demos

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