Skip to main content

NumberField
component

Use a number field to conveniently and accurately capture numerical values.

string
required

The content to use as the field label.

A button under the text field to provide extra functionality.

boolean

Whether the field can be modified.

string

Indicates an error to the user. The field is given specific stylistic treatment to communicate problems that have to be resolved immediately.

string

The label under the text field which provides guidance or instructions that assist users.

'decimal' | 'numeric'
number

The highest decimal or integer to be accepted for the field.

number

The maximum number of characters allowed in the input field.

number

The lowest decimal or integer to be accepted for the field.

() => void

The callback when focus is removed.

(value: string) => void

The callback when the user has finished editing a field.

() => void

The callback when input is focused.

(value: string) => void

Callback when the user makes any changes in the field. As noted in the documentation for onChange, you must not use this to update value — use the onChange callback for that purpose. Use the onInput prop when you need to do something as soon as the user makes a change, like clearing validation errors that apply to the field as soon as the user begins making the necessary adjustments.

string

A short hint that describes the expected value of the field.

boolean

Whether the field needs a value.

string

The current value for the field. Defaults to now. You should update this value in response to the onChange callback.

Was this section helpful?

Number input

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

const SmartGridModal = () => {
const [number, setNumber] = useState('');
return (
<Navigator>
<Screen name="NumberField" title="NumberField Example">
<ScrollView>
<NumberField
label="Number"
placeholder="1234"
helpText="Enter a numeric value."
value={number}
onChange={setNumber}
required={true}
action={{
label: 'Clear',
onPress: () => setNumber(''),
}}
/>
<Text>Entered Value: {number}</Text>
</ScrollView>
</Screen>
</Navigator>
);
};

export default reactExtension('pos.home.modal.render', () => (
<SmartGridModal />
));

Preview