---
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: admin_extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2025-10-rc/polaris-web-components/forms/form
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2025-10-rc/polaris-web-components/forms/form.txt
---

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

## Events

Learn more about [registering events](https://shopify.dev/docs/api/app-home/using-polaris-components#event-handling).

* reset

  CallbackEventListener\<typeof tagName> | null

  A callback that is run when the form is reset.

* submit

  CallbackExtendableEventListener\<typeof tagName> | null

  A callback that is run when the form is submitted.

### CallbackEventListener

```ts
(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null
```

### CallbackEvent

```ts
Event & {
  currentTarget: HTMLElementTagNameMap[T];
}
```

### CallbackExtendableEventListener

```ts
(EventListener & {
      (event: CallbackExtendableEvent<TTagName>): void;
    }) | null
```

### CallbackExtendableEvent

* AT\_TARGET

  ```ts
  number
  ```

* bubbles

  Returns true or false depending on how event was initialized. True if event goes through its target's ancestors in reverse tree order, and false otherwise.

  ```ts
  boolean
  ```

* BUBBLING\_PHASE

  ```ts
  number
  ```

* cancelable

  Returns true or false depending on how event was initialized. Its return value does not always carry meaning, but true can indicate that part of the operation during which event was dispatched, can be canceled by invoking the preventDefault() method.

  ```ts
  boolean
  ```

* cancelBubble

  ```ts
  boolean
  ```

* CAPTURING\_PHASE

  ```ts
  number
  ```

* composed

  Returns true or false depending on how event was initialized. True if event invokes listeners past a ShadowRoot node that is the root of its target, and false otherwise.

  ```ts
  boolean
  ```

* composedPath

  Returns the invocation target objects of event's path (objects on which listeners will be invoked), except for any nodes in shadow trees of which the shadow root's mode is "closed" that are not reachable from event's currentTarget.

  ```ts
  () => EventTarget[]
  ```

* currentTarget

  Returns the object whose event listener's callback is currently being invoked.

  ```ts
  EventTarget | null
  ```

* defaultPrevented

  Returns true if preventDefault() was invoked successfully to indicate cancelation, and false otherwise.

  ```ts
  boolean
  ```

* eventPhase

  Returns the event's phase, which is one of NONE, CAPTURING\_PHASE, AT\_TARGET, and BUBBLING\_PHASE.

  ```ts
  number
  ```

* initEvent

  ```ts
  (type: string, bubbles?: boolean, cancelable?: boolean) => void
  ```

* isTrusted

  Returns true if event was dispatched by the user agent, and false otherwise.

  ```ts
  boolean
  ```

* NONE

  ```ts
  number
  ```

* preventDefault

  If invoked when the cancelable attribute value is true, and while executing a listener for the event with passive set to false, signals to the operation that caused event to be dispatched that it needs to be canceled.

  ```ts
  () => void
  ```

* returnValue

  ```ts
  boolean
  ```

* srcElement

  ```ts
  EventTarget | null
  ```

* stopImmediatePropagation

  Invoking this method prevents event from reaching any registered event listeners after the current one finishes running and, when dispatched in a tree, also prevents event from reaching any other objects.

  ```ts
  () => void
  ```

* stopPropagation

  When dispatched in a tree, invoking this method prevents event from reaching any objects other than the current object.

  ```ts
  () => void
  ```

* target

  Returns the object to which event is dispatched (its target).

  ```ts
  EventTarget | null
  ```

* timeStamp

  Returns the event's timestamp as the number of milliseconds measured relative to the time origin.

  ```ts
  DOMHighResTimeStamp
  ```

* type

  Returns the type of event, e.g. "click", "hashchange", or "submit".

  ```ts
  string
  ```

* waitUntil

  Provide a promise that signals the length, and eventual success or failure of actions relating to the event. This may be called many times, which adds promises to the event. However, this may only be called synchronously during the dispatch of the event. As in, you cannot call it after a \`setTimeout\` or microtask.

  ```ts
  (promise: Promise<void>) => void
  ```

```ts
export interface CallbackExtendableEvent<
  TTagName extends keyof HTMLElementTagNameMap,
> extends CallbackEvent<TTagName>,
    Pick<ExtendableEvent, 'waitUntil'> {}
```

### Examples

* ####

  ##### Default

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