Skip to main content

Stepper
component

A component used for increasing or decreasing quantities.

number
required

The initial value of the stepper.

(value: number) => void
required

A callback when the value of the stepper changes.

boolean
Default: false

Whether the field can be modified.

number

Use to set the maximum value of the stepper.

number
Default: 1

Use to set the minimum value of the stepper.

number

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

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 (
<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 />
})

Preview