---
title: Form
description: The form component wraps form controls and enables implicit submission.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/form
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/form.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# Form

The form component wraps form controls and enables implicit submission, allowing customers to submit from any input by pressing **Enter**.

Unlike an HTML `form` element, this component doesn't support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that performs the necessary HTTP requests in JavaScript.

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Data collection**: Wrap multiple inputs into a single submittable group.
* **Implicit submission**: Let customers press Enter from any field to submit.
* **Multi-field layouts**: Combine text fields, selects, and checkboxes in one form.
* **Field validation**: Validate all fields together before processing a submission.

***

## Properties

Configure the following properties on the Form component.

* **onSubmit**

  **() => void**

  **required**

  A callback fired when the form is submitted.

* **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.

* **id**

  **string**

  An optional override for the autogenerated form ID.

***

## Examples

### Group fields with a submit button

Use form to group related input fields that submit together. This example shows a basic form with text fields and a submit button.

## Group fields with a submit button

![A form with text fields and a submit button](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/form-default-CuXK-W01.png)

## Group fields with a submit button

##### React

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

export default reactExtension(
  'customer-account.page.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>
  );
}
```

##### JS

```js
import {
  extension,
  BlockSpacer,
  Button,
  Form,
  Grid,
  GridItem,
  TextField,
  View,
} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.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);
});
```

***

## Best practices

* **Place one submit button per form**: Include a single submit button at the end of the form to keep the submission flow clear.
* **Register a submit handler**: Form 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. Use separate forms for independent data collection tasks.

***

## Limitations

* Doesn't automatically submit data using HTTP.
* Each form supports only one submit button.

***