Choose a version:

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.

Anchor to eventsEvents

Learn more about registering events.

Anchor to reset reset <typeof tagName> | null: A callback that is run when the form is reset.
Anchor to submit submit <typeof tagName> | null: A callback that is run when the form is submitted.

FormEvents

reset
A callback that is run when the form is reset.
```
CallbackEventListener<typeof tagName> | null
```
submit
A callback that is run when the form is submitted.
```
CallbackExtendableEventListener<typeof tagName> | null
```

export interface FormEvents {
  /**
   * A callback that is run when the form is submitted.
   */
  submit: CallbackExtendableEventListener<typeof tagName> | null = null;
  /**
   * A callback that is run when the form is reset.
   */
  reset: CallbackEventListener<typeof tagName> | null = null;
}

CallbackEventListener

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

CallbackEvent

Event & {
  currentTarget: HTMLElementTagNameMap[T];
}

CallbackExtendableEventListener

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

CallbackExtendableEvent

AT_TARGET
```
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.
```
boolean
```
BUBBLING_PHASE
```
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.
```
boolean
```
cancelBubble
```
boolean
```
CAPTURING_PHASE
```
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.
```
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.
```
() => EventTarget[]
```
defaultPrevented
Returns true if preventDefault() was invoked successfully to indicate cancelation, and false otherwise.
```
boolean
```
eventPhase
Returns the event's phase, which is one of NONE, CAPTURING_PHASE, AT_TARGET, and BUBBLING_PHASE.
```
number
```

initEvent

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

isTrusted
Returns true if event was dispatched by the user agent, and false otherwise.
```
boolean
```
NONE
```
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.
```
() => void
```
returnValue
```
boolean
```
srcElement
```
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.
```
() => void
```
stopPropagation
When dispatched in a tree, invoking this method prevents event from reaching any objects other than the current object.
```
() => void
```
target
Returns the object to which event is dispatched (its target).
```
EventTarget | null
```
timeStamp
Returns the event's timestamp as the number of milliseconds measured relative to the time origin.
```
DOMHighResTimeStamp
```
type
Returns the type of event, e.g. "click", "hashchange", or "submit".
```
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.
```
(promise: Promise<void>) => void
```

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

Was this section helpful?

<s-form>

<s-text-field label="Email address" />

<s-button variant="primary" accessibilityRole="submit">Submit</s-button>

</s-form>

examples

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

<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: grid; place-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><s-form>
  <s-text-field label="Email address" />
  <s-button variant="primary" accessibilityRole="submit">Submit</s-button>
</s-form>
</body></html>