---
title: Stepper
description: A component used for increasing or decreasing quantities.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components/stepper'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components/stepper.md'
---

# Steppercomponent

A component used for increasing or decreasing quantities.

## Stepper

* initialValue

  number

  required

  The initial value of the stepper.

* onValueChanged

  (value: number) => void

  required

  A callback when the value of the stepper changes.

* minimumValue

  number

  Default: 1

  Use to set the minimum value of the stepper.

* maximumValue

  number

  Use to set the maximum value of the stepper.

* value

  number

  Only use this field if you wish to override the internal state of this component.

* disabled

  boolean

  Default: false

  Whether the field can be modified.

### Examples

* #### Stepper

  ##### React

  ```tsx
  import React, { useState } from 'react';

  import { Screen, reactExtension, Text, Stepper, ScrollView } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridModal = () => {
    const [value, setValue] = useState(4);

    return (
      <Screen name='stepper' title='Stepper'>
        <ScrollView>
          <Stepper initialValue={value} onValueChanged={setValue} />
          <Text>{value}</Text>
        </ScrollView>
      </Screen>
    );
  }

  export default reactExtension('pos.home.modal.render', () => {
    return <SmartGridModal />
  })
  ```

  ##### TS

  ```ts
  import {
    extension,
    Screen,
    ScrollView,
    Stepper,
    Text,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.home.modal.render',
    (root) => {
      const mainScreen = root.createComponent(
        Screen,
        {name: 'stepper', title: 'Stepper'},
      );
      const scrollView =
        root.createComponent(ScrollView);
      const text = root.createComponent(
        Text,
        null,
        '4',
      );
      const stepper = root.createComponent(
        Stepper,
        {
          initialValue: 4,
          onValueChanged: (value) => {
            text.replaceChildren(value.toString());
          },
        },
      );

      scrollView.append(stepper);
      scrollView.append(text);
      mainScreen.append(scrollView);
      root.append(mainScreen);
    },
  );
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/stepper-default.png)