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 component and is available as <s-form> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris form component.

Anchor to onSubmitonSubmit

The previous Form onSubmit prop still uses onSubmit in Preact, but it now handles the 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 for details.

Anchor to Removed propertiesRemoved properties

Anchor to disableddisabled

The Polaris form component no longer supports disabled. Track a local submitting state and set disabled on the submit button to block further submissions.

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>
  );
}

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>
  );
}