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.

Form

The Form component should be used to wrap one or more form controls. The Form component provides an "implicit submit" behavior, where buyers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible.

Unlike an HTML form element, the Form component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an onSubmit callback that will perform the necessary HTTP requests in JavaScript.

Support
Targets (50)

Supported targets

Anchor to FormPropsFormProps

Anchor to onSubmit
onSubmit
() => void
required

A callback fired when the form is submitted.

Anchor to disabled
disabled
boolean

Whether the form is disabled, preventing submission and the implicit submit behavior from inputs. When set to true, pressing Enter in a field will not submit the form.

Anchor to id
id
string

An optional override for the autogenerated form ID.

Anchor to ExamplesExamples

Anchor to Basic FormBasic Form

Basic Form

Example

Basic Form

import {
reactExtension,
BlockSpacer,
Button,
Form,
Grid,
GridItem,
TextField,
View,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<Form
onSubmit={() =>
console.log('onSubmit event')
}
>
<Grid
columns={['50%', '50%']}
spacing="base"
>
<View>
<TextField label="First name" />
</View>
<View>
<TextField label="Last name" />
</View>
<GridItem columnSpan={2}>
<TextField label="Company" />
</GridItem>
</Grid>
<BlockSpacer spacing="base" />
<Button accessibilityRole="submit">
Submit
</Button>
</Form>
);
}
import {
extension,
BlockSpacer,
Button,
Form,
Grid,
GridItem,
TextField,
View,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
const fields = root.createComponent(
Grid,
{columns: ['50%', '50%'], spacing: 'base'},
[
root.createComponent(
View,
undefined,
root.createComponent(TextField, {label: 'First name'}),
),
root.createComponent(
View,
undefined,
root.createComponent(TextField, {label: 'Last name'}),
),
root.createComponent(
GridItem,
{columnSpan: 2},
root.createComponent(TextField, {label: 'Company'}),
),
],
);
const spacer = root.createComponent(BlockSpacer, {spacing: 'base'});
const button = root.createComponent(
Button,
{accessibilityRole: 'submit'},
'Submit',
);

const form = root.createComponent(
Form,
{onSubmit: () => console.log('onSubmit event')},
[fields, spacer, button],
);

root.appendChild(form);
});

Anchor to Best practicesBest practices

  • Place one submit button per form: Include a single submit button at the end of the Form component to keep the submission flow clear.
  • Register an onSubmit handler: The Form component doesn't submit data over HTTP. Provide an onSubmit callback to process form data programmatically.
  • Group related fields: Wrap only related inputs in a single Form component. Use separate Form components for independent data collection tasks.

Anchor to LimitationsLimitations

  • The Form component doesn't automatically submit data using HTTP. You must implement onSubmit to process form data.
  • Each form supports only one submit button.
Was this page helpful?