Choose a version:

Stepper
component

A component used for increasing or decreasing quantities.

Anchor to stepperStepper

Anchor to initialValue initialValue number required: The initial value of the stepper.
Anchor to onValueChanged onValueChanged (value: number) => void required: A callback when the value of the stepper changes.
Anchor to minimumValue minimumValue number Default: 1: Use to set the minimum value of the stepper.
Anchor to maximumValue maximumValue number: Use to set the maximum value of the stepper.
Anchor to value value number: Only use this field if you wish to override the internal state of this component.
Anchor to disabled disabled boolean Default: false: Whether the field can be modified.

StepperProps

initialValue
The initial value of the stepper.
```
number
```
onValueChanged
A callback when the value of the stepper changes.
```
(value: number) => void
```
minimumValue
Use to set the minimum value of the stepper.
```
number
```
maximumValue
Use to set the maximum value of the stepper.
```
number
```
value
Only use this field if you wish to override the internal state of this component.
```
number
```
disabled
Whether the field can be modified.
```
boolean
```

export interface StepperProps {
  /**
   * The initial value of the stepper.
   */
  initialValue: number;

  /**
   * A callback when the value of the stepper changes.
   */
  onValueChanged: (value: number) => void;

  /**
   * Use to set the minimum value of the stepper.
   * @defaultValue 1
   */
  minimumValue?: number;

  /**
   * Use to set the maximum value of the stepper.
   */
  maximumValue?: number;

  /**
   * Only use this field if you wish to override the internal state of this component.
   */
  value?: number;

  /**
   * Whether the field can be modified.
   * @defaultValue false
   */
  disabled?: boolean;
}

Was this section helpful?

Stepper

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 (

<Text>{value}</Text>

</ScrollView>

</Screen>

);

}

export default reactExtension('pos.home.modal.render', () => {

return <SmartGridModal />

})

examples

Stepper

React

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

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);
  },
);

Steppercomponent

Anchor to stepperStepper

StepperProps

examples

Stepper

React

TS

Preview

Stepper
component