---
title: "Angular Forms Stepper Example | Mobiscroll"
component: "Forms"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/forms/stepper"
---

# Stepper - Angular Forms demo

Angular stepper example with fixed/custom steps and editable values.

- [Live demo](https://demo.mobiscroll.com/angular/forms/stepper)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/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), [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
<mbsc-stepper label="Adults" description="From 14 years" [min]="1" [max]="15"></mbsc-stepper>
<mbsc-stepper label="Children" description="2-14 years" [max]="15" inputPosition="start"></mbsc-stepper>
<mbsc-stepper label="Infant" description="0-2 years" [max]="10" inputPosition="start"></mbsc-stepper>
```

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light',
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {}
```

### Template

```html
<mbsc-page>
  <div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Stepper</div>
    <mbsc-stepper label="Adults" description="From 14 years" [min]="1" [max]="15"></mbsc-stepper>
    <mbsc-stepper label="Children" description="2-14 years" [max]="15" inputPosition="start"></mbsc-stepper>
    <mbsc-stepper label="Infant" description="0-2 years" [max]="10" inputPosition="start"></mbsc-stepper>
  </div>
</mbsc-page>
```

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

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

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

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

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

## Related demos

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