Skip to main content

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.

Support
Targets (24)

Supported targets

  • customer-account.footer.render-after
  • customer-account.order-index.announcement.render
  • customer-account.order-index.block.render
  • customer-account.order-status.announcement.render
  • customer-account.order-status.block.render
  • customer-account.order-status.cart-line-item.render-after
  • customer-account.order-status.cart-line-list.render-after
  • customer-account.order-status.customer-information.render-after
  • customer-account.order-status.fulfillment-details.render-after
  • customer-account.order-status.payment-details.render-after
  • customer-account.order-status.return-details.render-after
  • customer-account.order-status.unfulfilled-items.render-after
  • customer-account.order.action.menu-item.render
  • customer-account.order.action.render
  • customer-account.order.page.render
  • customer-account.page.render
  • customer-account.profile.addresses.render-after
  • customer-account.profile.announcement.render
  • customer-account.profile.block.render
  • customer-account.profile.company-details.render-after
  • customer-account.profile.company-location-addresses.render-after
  • customer-account.profile.company-location-payment.render-after
  • customer-account.profile.company-location-staff.render-after
  • customer-account.profile.payment.render-after

Anchor to propertiesProperties

Anchor to id
id
string

A unique identifier for the element.

Anchor to eventsEvents

Learn more about registering events.

Anchor to submit
submit
<typeof tagName>

A callback that is run when the form is submitted.

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

Preview

Anchor to best-practicesBest Practices

  • Wrap all form input elements with the Form component.
  • Each form should have only one submit button, placed at the end of the form.
Was this page helpful?