Choose a version:

Form

The form component wraps form controls and enables implicit submission, allowing users to submit from any input by pressing Enter. Use form to group related input fields and handle form submission through JavaScript event handlers.

Unlike HTML forms, form doesn't automatically submit data using HTTP—you must register a submit event to process form data programmatically. For Shopify Functions configuration forms, use function settings.

Form doesn't automatically submit data over HTTP. Register a submit event handler to process form data in your extension.

Support

Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the form component.

Anchor to id id string: A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to EventsEvents

The form component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to submit submit <typeof tagName>: A callback fired when the form is submitted.

CallbackEventListener

A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.

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

CallbackEvent

An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to ExamplesExamples

Anchor to Group fields with a submit buttonGroup fields with a submit button

Group form controls and handle submission together. This example uses an s-form containing an s-text-field and a submit s-button.

Group fields with a submit button

A rendered example of the form component

html

<s-form>

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

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

</s-form>

Anchor to Build a multi-field formBuild a multi-field form

Combine multiple input types in a single form. This example shows an s-form with a text field, email field, text area, and a submit button.

html

<s-form>

<s-text-field label="Full name" required />

<s-email-field label="Email address" required />

<s-text-area label="Special instructions" rows="3" />

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

</s-form>

Anchor to Best practicesBest practices

Place one submit button per form: Include a single submit button at the end of the form to keep the submission flow clear.
Register a submit handler: Form doesn't submit data over HTTP. Register a submit event listener to process form data programmatically.
Group related fields: Wrap only related inputs in a single form. Use separate forms for independent data collection tasks.

Was this page helpful?