---
title: Form
description: >-
  The form component should be used to wrap one or more form controls. This
  component provides an "implicit submit" behavior, where customers 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, this 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.
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 should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers 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, this 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 (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## FormProps

* **onSubmit**

  **() => void**

  **required**

  A callback that is run when the form is submitted.

* **disabled**

  **boolean**

  Whether the form is able to be submitted. When set to `true`, this will disable the implicit submit behavior of the form.

* **id**

  **string**

  An optional override for the autogenerated form ID.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/form-default-CuXK-W01.png)

### Examples

* #### Basic Form

  ##### 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

* Wrap around all form input elements.

* Forms can have only one submit button and it must be at the end of the form.