---
title: Form
description: Wraps one or more form controls and enables implicit submission, letting users submit the form from any input by pressing “Enter.” Unlike the HTML form element, this component doesn’t automatically submit data via HTTP. You must register a `submit` event to handle form submission in JavaScript.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/forms/form
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/forms/form.md
---

# Form

Wraps one or more form controls and enables implicit submission, letting users submit the form from any input by pressing “Enter.” Unlike the HTML form element, this component doesn’t automatically submit data via HTTP. You must register a `submit` event to handle form submission in JavaScript.

## Properties

* id

  string

  A unique identifier for the element.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/checkout-ui-extensions/2025-10/using-polaris-components#event-handling).

* submit

  CallbackEventListener\<typeof tagName>

  A callback that is run when the form is submitted.

### CallbackEventListener

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null
```

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-form>
    <s-text-field label="Email address" />
    <s-button type="submit" variant="primary">Submit</s-button>
  </s-form>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/form-default.png)

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