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

# Stepper - React Forms demo

React stepper example with fixed/custom steps and editable values. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/forms/stepper)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/form-components/forms/stepper)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-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), [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
<Stepper label="Adults" description="From 14 years" min={1} defaultValue={1} max={15} />
<Stepper label="Children" description="2-14 years" inputPosition="start" max={15} />
<Stepper label="Infant" description="0-2 years" inputPosition="start" max={10} />
```

## Code

### JSX

```jsx
import { Page, setOptions, Stepper } from '@mobiscroll/react';

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

function App() {
  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Passengers</div>
        <Stepper label="Adults" description="From 14 years" min={1} defaultValue={1} max={15} />
        <Stepper label="Children" description="2-14 years" inputPosition="start" max={15} />
        <Stepper label="Infant" description="0-2 years" inputPosition="start" max={10} />
      </div>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Page, setOptions, Stepper } from '@mobiscroll/react';
import { FC } from 'react';

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

const App: FC = () => (
  <Page>
    <div className="mbsc-form-group">
      <div className="mbsc-form-group-title">Passengers</div>
      <Stepper label="Adults" description="From 14 years" min={1} defaultValue={1} max={15} />
      <Stepper label="Children" description="2-14 years" inputPosition="start" max={15} />
      <Stepper label="Infant" description="0-2 years" inputPosition="start" max={10} />
    </div>
  </Page>
);
export default App;
```

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

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

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

## Related demos

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