Concorde documentation (crawl) · interactive version

Concorde functional component — Submit. > Live demos: <docs-lit-demo> + src/docs/example/docs-submit-demos.ts. Use Local API demos (serviceURL="/docs-mock-api"). Doc ID: core/components/functional/submit/submit. Keywords: Concorde, supersoniks, core/components/functional/submit/submit, submit, Submit, functional component, sonic-submit, web component, , src/docs/example/docs-submit-demos.ts, serviceURL="/docs-mock-api", serviceURL, dataProvider, endPoint, onClick, onEnterKey, formDataProvider, sonic-input. URL: https://concorde.supersoniks.org/crawl/core/components/functional/submit/submit.html.

Submit

Live demos: <docs-lit-demo> + src/docs/example/docs-submit-demos.ts. Use Local API demos (serviceURL="/docs-mock-api").

Overview

sonic-submit sends the formDataProvider publisher to a REST endpoint (same configuration model as fetch: serviceURL on an ancestor, path via dataProvider or endPoint).

Trigger Attribute
Click inside the slot onClick
Enter in a focused field inside the slot onEnterKey
Data / API Attribute / property Notes
Form fields formDataProvider on ancestor Filled by sonic-input, sonic-select, etc. via name
Result after call submitResultDataProvider on ancestor Whole result object (after optional submit-result-key)
Slice of JSON result submit-result-key on sonic-submit Dot path, e.g. data when the API returns { data: { … } }
HTTP verb method on sonic-submit post (default), put, patch, delete, get — not inherited from sonic-scope
Path override endPoint on sonic-submit Wins over ancestor dataProvider
JSON vs multipart sendAsFormData on sonic-submit FormData body, still expects JSON response
Reset publishers clearedDataOnSuccess on ancestor Space-separated DataProviderKey.path values; runs when a result object is returned (including error payloads with messages)
Browser form POST native on sonic-submit See Native HTML form
Result event — Bubbles submit CustomEvent with detail = result
Credential Management API usernameKey, passwordKey on sonic-submit After a successful HTTP response, stores login if those keys exist in the payload (defaults: username, password)
ALTCHA / captcha needsCaptchaValidation on form/header publisher Defers send until token is set — see Captcha

While a REST submit runs, the slot is wrapped with data-disabled (faded, no pointer events). With native, validation and loader still run, then the browser performs a normal form submission.

Form and result handling

POST to mock api/register; result publisher submit-example-result.

Native HTML form

With native, Concorde does not call fetch. After form validation it:

  1. Copies formDataProvider values into matching <input> / <select> / <textarea> inside the closest <form> (creates hidden inputs if needed).
  2. Programmatically clicks a hidden native type="submit" control (name / value on sonic-submit if you need them).

Use a real <form action="…" method="post"> ancestor. For SPAs, a named target (e.g. iframe) avoids leaving the doc page.

sendAsFormData

Sends fields as multipart/form-data instead of application/json (response is still parsed as JSON).

submit-result-key

When the API wraps the payload (e.g. { data: { id, token } }), set submit-result-key="data" on sonic-submit so submitResultDataProvider receives only the inner object.

Mock endpoint: POST /docs-mock-api/api/register/nested.

clearedDataOnSuccess

Lists one or more publisher ids (space-separated). After the API returns a result object, each is set to {} — useful to reset the form publisher.

Custom submit event

Listen for the bubbling submit event; event.detail is the same result written to submitResultDataProvider (if configured).

endPoint vs dataProvider

Ancestor dataProvider is the default path; endPoint on sonic-submit overrides it for that button only.

method="get"

Appends publisher fields as a query string on the endpoint, then performs a GET. The mock route api/register/echo returns the query for inspection.

dot notation (formDataProvider shape)

You can use dot notation in name on form controls; the publisher stores nested objects:

<sonic-scope formDataProvider="submit-example-dot-notation">
     <div class="grid grid-cols-2 gap-4 mb-4 ">
        <sonic-input required name="email.value" type="email" value="eve.holt@reqres.in"></sonic-input>
        <sonic-input required type="password" name="details.password.value" value="pistol"></sonic-input>
      </div>
    </sonic-scope>

Stored shape:

{
    email: { value: "eve.holt@reqres.in" },
    details: { password: { value: "pistol" } }
  }