---
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/latest/components/forms/form
  md: https://shopify.dev/docs/api/admin-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.

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

* bubbles

  The \*\*\`bubbles\`\*\* read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/bubbles)

  ```ts
  boolean
  ```

* BUBBLING\_PHASE

  ```ts
  3
  ```

* cancelable

  The \*\*\`cancelable\`\*\* read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/cancelable)

  ```ts
  boolean
  ```

* cancelBubble

  The \*\*\`cancelBubble\`\*\* property of the Event interface is deprecated.

  ```ts
  boolean
  ```

* CAPTURING\_PHASE

  ```ts
  1
  ```

* composed

  The read-only \*\*\`composed\`\*\* property of the or not the event will propagate across the shadow DOM boundary into the standard DOM. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/composed)

  ```ts
  boolean
  ```

* composedPath

  The \*\*\`composedPath()\`\*\* method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/composedPath)

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

* currentTarget

  The \*\*\`currentTarget\`\*\* read-only property of the Event interface identifies the element to which the event handler has been attached. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/currentTarget)

  ```ts
  EventTarget | null
  ```

* defaultPrevented

  The \*\*\`defaultPrevented\`\*\* read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/defaultPrevented)

  ```ts
  boolean
  ```

* eventPhase

  The \*\*\`eventPhase\`\*\* read-only property of the being evaluated. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/eventPhase)

  ```ts
  number
  ```

* initEvent

  The \*\*\`Event.initEvent()\`\*\* method is used to initialize the value of an event created using Document.createEvent().

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

* isTrusted

  The \*\*\`isTrusted\`\*\* read-only property of the when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and \`false\` when the event was dispatched via The only exception is the \`click\` event, which initializes the \`isTrusted\` property to \`false\` in user agents. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/isTrusted)

  ```ts
  boolean
  ```

* NONE

  ```ts
  0
  ```

* preventDefault

  The \*\*\`preventDefault()\`\*\* method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/preventDefault)

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

* returnValue

  The Event property \*\*\`returnValue\`\*\* indicates whether the default action for this event has been prevented or not.

  ```ts
  boolean
  ```

* srcElement

  The deprecated \*\*\`Event.srcElement\`\*\* is an alias for the Event.target property.

  ```ts
  EventTarget | null
  ```

* stopImmediatePropagation

  The \*\*\`stopImmediatePropagation()\`\*\* method of the If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation)

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

* stopPropagation

  The \*\*\`stopPropagation()\`\*\* method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/stopPropagation)

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

* target

  The read-only \*\*\`target\`\*\* property of the dispatched. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/target)

  ```ts
  EventTarget | null
  ```

* timeStamp

  The \*\*\`timeStamp\`\*\* read-only property of the Event interface returns the time (in milliseconds) at which the event was created. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/timeStamp)

  ```ts
  DOMHighResTimeStamp
  ```

* type

  The \*\*\`type\`\*\* read-only property of the Event interface returns a string containing the event's type. \[MDN Reference]\(https\://developer.mozilla.org/docs/Web/API/Event/type)

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

* ####

  ##### html

  ```html
  import { render } from 'preact';
  import { useState } from 'preact/hooks';

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

  const defaultValues = {
    text: 'default value',
    number: 50,
  };

  function Extension() {
    const [textValue, setTextValue] = useState('');
    const [numberValue, setNumberValue] = useState('');

    return (
      <s-admin-block title="My Block Extension">
        <s-form
          onSubmit={(event) => {
            event.waitUntil(fetch('app:save/data'));
            console.log('submit', {textValue, numberValue});
          }}
          onReset={() => console.log('automatically reset values')}
        >
          <s-stack direction="block" gap="base">
            <s-text-field
              label="Default Value"
              name="my-text"
              defaultValue={defaultValues.text}
              value={textValue}
              onChange={(e) => setTextValue(e.target.value)}
            />
            <s-number-field
              label="Percentage field"
              name="my-number"
              defaultValue={defaultValues.number}
              value={numberValue}
              onChange={(e) => setNumberValue(e.target.value)}
            />
          </s-stack>
        </s-form>
      </s-admin-block>
    );
  }
  ```