---
title: Migrate to the Polaris form component
description: >-
  Learn how to migrate the Form component to Polaris web components in checkout
  and customer account UI extensions.
source_url:
  html: 'https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/form'
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/form.md
---

# Migrate to the Polaris form component

The Polaris form component groups form controls and enables implicit submission when the user presses Enter. It replaces the previous [`Form`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/forms/form) component and is available as [`<s-form>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/form) in API versions 2025-10 and newer.

***

## Updated properties

The following properties are different in the Polaris form component.

### on​Submit

The previous `Form` `onSubmit` prop still uses `onSubmit` in Preact, but it now handles the [`submit`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/form#events-propertydetail-submit) event. The handler now receives an `Event` instead of being called with no arguments.

When migrating, also update your submit button: `<Button accessibilityRole="submit">` becomes `<s-button type="submit">`. See the [button migration guide](https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/button) for details.

***

## Removed properties

### disabled

The Polaris form component no longer supports `disabled`. Track a local submitting state and set [`disabled`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/button#properties-propertydetail-disabled) on the submit button to block further submissions.

## Migrating disabled

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState} from 'preact/hooks';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const [isSubmitting, setIsSubmitting] = useState(false);

  return (
    <s-form
      onSubmit={(event) => {
        setIsSubmitting(true);
      }}
    >
      <s-text-field label="Email" name="email" />
      <s-button type="submit" variant="primary" disabled={isSubmitting}>
        Submit
      </s-button>
    </s-form>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  Form,
  TextField,
  Button,
} from '@shopify/ui-extensions-react/checkout';
import {useState} from 'react';

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

function Extension() {
  const [isSubmitting, setIsSubmitting] = useState(false);

  return (
    <Form
      disabled={isSubmitting}
      onSubmit={() => setIsSubmitting(true)}
    >
      <TextField label="Email" />
      <Button accessibilityRole="submit">Submit</Button>
    </Form>
  );
}
```

***