Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

MoneyField

The MoneyField component provides a specialized numeric input for monetary values. It accepts a currency code, minimum and maximum constraints, and returns values as either a number or a Money object.

For plain numeric input without currency handling, use NumberField.

Support
Targets (46)

Supported targets

Anchor to PropertiesProperties

Props for the MoneyField component, a specialized input for entering monetary values. It extends standard input props with number constraints and autocomplete support for transaction amounts.

Anchor to label
label
string
required

The text content to display as the field's label. This label is always required for accessibility as it tells users what information the field expects. The label is rendered visually above the field.

Anchor to autocomplete
autocomplete
| AutocompleteField | `${} ${AutocompleteField}` | `${} ${AutocompleteField}` | `${} ${} ${AutocompleteField}` | boolean

A hint to the browser about the expected content of the field, used to offer autofill suggestions.

  • true: The field supports autofill, but no specific content type is specified.
  • false: The field contains sensitive or ephemeral data that should not be autofilled, such as one-time codes.
  • An AutocompleteField token (such as 'email' or 'street-address'): Tells the browser exactly what data to suggest for this field.

Learn more about the supported autocomplete values.

Anchor to currencyCode
currencyCode

The ISO 4217 currency code associated with the monetary value. This code is included in the Money object returned by onChange. For example, 'USD' for US Dollars or 'EUR' for Euros.

Anchor to defaultValue
defaultValue
string | string[]

The initial value of the field when it isn't controlled by state. Use this instead of value when you don't need to manage the field's state yourself. The component tracks its own value internally and reports changes through onChange.

Anchor to disabled
disabled
boolean
Default: false

Whether the field is disabled. When true, the field can't be edited by the user, won't receive focus, and won't be submitted with the form. Use this for fields that aren't relevant in the current context.

Anchor to error
error
string

An error message to display below the field. When set, the field receives a specific stylistic treatment (typically a red border) to communicate problems that have to be resolved immediately. The string value is displayed as the error message.

Pass undefined or omit this prop to clear the error state.

Anchor to id
id
string

A unique identifier for the field.

Anchor to max
max
number

The highest decimal or integer to be accepted for the field. When using the stepper buttons, the value won't exceed this limit. If step would overshoot, then the value rounds down to max. A user can still type a number higher than max using the keyboard, so add appropriate validation with the error prop.

Anchor to min
min
number
Default: 0

The lowest decimal or integer to be accepted for the field. When using the stepper buttons, the value won't go below this limit. If step would undershoot, then the value rounds up to min. A user can still type a number lower than min using the keyboard, so add appropriate validation with the error prop.

Anchor to name
name
string

An identifier for the field that is unique within the nearest containing Form component.

Anchor to onBlur
onBlur
() => void

A callback fired when the field loses focus. This is useful for triggering validation after the user finishes interacting with the field, or for tracking which fields have been "touched" in a form.

Anchor to onChange
onChange
(value: number | ) => void

A callback that fires when the user finishes editing the field, typically on blur. Only fires if the value changed. Update your state in this callback and pass the new value back through the value prop.

This doesn't fire on every keystroke. Use onInput for real-time responses like clearing validation errors as the user types. Don't use onInput to control value because that can cause issues on lower-powered devices due to asynchronous rendering.

Anchor to onFocus
onFocus
() => void

A callback fired when the field receives focus. This is useful for clearing errors, showing helper text, or tracking user interaction with form fields.

Anchor to onInput
onInput
(value: number | ) => void

A callback that fires on every change the user makes in the field, including each keystroke. The callback receives the current value.

Use onInput for immediate responses like clearing validation errors as the user types. Don't use it to control the field's value prop. Use onChange for that instead.

Anchor to placeholder
placeholder
string

A short hint displayed inside the field when it's empty. Use placeholder text to show an example of the expected value (such as "100" or "Search by name"). Don't use placeholder text as a substitute for the label as it disappears after the user starts typing.

Anchor to readOnly
readOnly
boolean
Default: false

Whether the field is read-only. Unlike disabled, a read-only field can still receive focus and its value is included when the form is submitted. Use this when the value should be visible and selectable but not editable, such as a computed total.

Anchor to required
required
boolean

Whether the field needs a value. This requirement adds semantic value to the field, but it won't cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the error prop.

Anchor to step
step
number
Default: 1

The increment amount for the stepper buttons. This can be an integer or decimal (such as 0.01 for cents). Each press of the stepper button increases or decreases the value by this amount. If max or min is set, the final value always rounds to the boundary rather than overshooting.

Anchor to value
value
T

The current value for the field. If omitted, then the field will be empty. You should update this value in response to the onChange callback.

Anchor to ExamplesExamples

Anchor to Set product cost priceSet product cost price

Set a cost-per-item price in USD and save it from an action modal. This example uses MoneyField with currencyCode set to USD, with a Button that saves the price and closes the modal.

Set product cost price

Set a cost-per-item price in USD and save it from an action modal. This example uses `MoneyField` with `currencyCode` set to USD, with a [Button](/docs/api/admin-extensions/2025-07/ui-components/actions/button) that saves the price and closes the modal.

Set product cost price

import {useState} from 'react';
import {reactExtension, useApi, MoneyField, Button, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {
const {data, close} = useApi('admin.product-details.action.render');
const productId = data.selected[0]?.id;
const [cost, setCost] = useState(0);

return (
<BlockStack>
<MoneyField
label="Cost per item"
name="costPrice"
currencyCode="USD"
value={cost}
onChange={setCost}
/>
<Button
variant="primary"
onPress={async () => {
await fetch('/api/products/cost', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({productId, costPrice: cost}),
});
close();
}}
>
Save cost price
</Button>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.action.render',
() => <App />,
);
import {extension, MoneyField, Button, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.action.render',
(root, api) => {
const {data, close} = api;
const productId = data.selected[0]?.id;
let costPrice = 0;

const stack = root.createComponent(BlockStack);

const field = root.createComponent(MoneyField, {
label: 'Cost per item',
name: 'costPrice',
currencyCode: 'USD',
onChange: (value) => {
costPrice = value;
},
});

const saveButton = root.createComponent(
Button,
{
variant: 'primary',
onPress: async () => {
await fetch('/api/products/cost', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({productId, costPrice}),
});
close();
},
},
'Save cost price',
);

stack.appendChild(field);
stack.appendChild(saveButton);
root.appendChild(stack);
},
);

Anchor to Configure regional currency pricingConfigure regional currency pricing

Display multiple money fields with different currencyCode values for regional pricing. This example renders USD, EUR, and GBP price fields in a BlockStack, each automatically formatted with the correct currency symbol and decimal precision for their locale.

Configure regional currency pricing

import {reactExtension, MoneyField, BlockStack, Text} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<BlockStack>
<Text fontWeight="bold">Regional pricing</Text>
<MoneyField label="US price" name="priceUsd" currencyCode="USD" value={49.99} />
<MoneyField label="EU price" name="priceEur" currencyCode="EUR" value={44.99} />
<MoneyField label="UK price" name="priceGbp" currencyCode="GBP" value={39.99} />
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, MoneyField, BlockStack, Text} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const stack = root.createComponent(BlockStack);

const heading = root.createComponent(
Text,
{fontWeight: 'bold'},
'Regional pricing',
);

const usdField = root.createComponent(MoneyField, {
label: 'US price',
name: 'priceUsd',
currencyCode: 'USD',
value: 49.99,
});

const eurField = root.createComponent(MoneyField, {
label: 'EU price',
name: 'priceEur',
currencyCode: 'EUR',
value: 44.99,
});

const gbpField = root.createComponent(MoneyField, {
label: 'UK price',
name: 'priceGbp',
currencyCode: 'GBP',
value: 39.99,
});

stack.appendChild(heading);
stack.appendChild(usdField);
stack.appendChild(eurField);
stack.appendChild(gbpField);
root.appendChild(stack);
},
);

Anchor to Validate minimum price amountValidate minimum price amount

Enforce minimum price constraints using min and the error prop for inline validation. This example prevents merchants from setting a wholesale price at zero or below, displaying an error until they've entered a valid amount.

Validate minimum price amount

import {useState} from 'react';
import {reactExtension, useApi, MoneyField, Button, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {
const {data, close} = useApi('admin.product-details.action.render');
const productId = data.selected[0]?.id;
const [price, setPrice] = useState(0);
const [error, setError] = useState(undefined);

return (
<BlockStack>
<MoneyField
label="Wholesale price"
name="wholesalePrice"
currencyCode="USD"
min={0.01}
required
value={price}
error={error}
onChange={(value) => {
setPrice(value);
setError(value <= 0 ? 'Wholesale price must be greater than zero' : undefined);
}}
/>
<Button
variant="primary"
onPress={async () => {
if (price > 0) {
await fetch('/api/products/wholesale-price', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({productId, wholesalePrice: price}),
});
close();
}
}}
>
Save wholesale price
</Button>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.action.render',
() => <App />,
);
import {extension, MoneyField, Button, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.action.render',
(root, api) => {
const {data, close} = api;
const productId = data.selected[0]?.id;
let wholesalePrice = 0;

const stack = root.createComponent(BlockStack);

const field = root.createComponent(MoneyField, {
label: 'Wholesale price',
name: 'wholesalePrice',
currencyCode: 'USD',
min: 0.01,
required: true,
onChange: (value) => {
wholesalePrice = value;
if (value <= 0) {
field.updateProps({error: 'Wholesale price must be greater than zero'});
} else {
field.updateProps({error: undefined});
}
},
});

const saveButton = root.createComponent(
Button,
{
variant: 'primary',
onPress: async () => {
if (wholesalePrice > 0) {
await fetch('/api/products/wholesale-price', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({productId, wholesalePrice}),
});
close();
}
},
},
'Save wholesale price',
);

stack.appendChild(field);
stack.appendChild(saveButton);
root.appendChild(stack);
},
);

Anchor to Best practicesBest practices

  • Use MoneyField instead of NumberField for prices: MoneyField handles currency-specific formatting and provides the currency code alongside the amount, making it the right choice for any monetary input.
  • Narrow the onChange value type: The onChange callback receives number | Money. When currencyCode is set, the value is a Money object with amount and currencyCode properties. Otherwise, it's a plain number. Use a type check (for example, typeof value === 'object') to narrow the type before reading the value.

Anchor to LimitationsLimitations

  • MoneyField doesn't automatically format the displayed value with thousands separators or decimal places based on the currency. The raw numeric input is shown as entered.
  • The currency code isn't visually displayed inside the field. If you want to show the currency symbol or code, you might need to use the label or a nearby Text component.
  • MoneyField supports a large set of ISO 4217 currency codes, but currency-specific rules (like the number of decimal places for JPY vs USD) aren't automatically enforced. You must validate decimal precision yourself.
  • The min and max props define valid boundaries but don't prevent typing values outside the range. Validate in your onChange handler and set error accordingly.
Was this page helpful?