> ## Documentation Index
> Fetch the complete documentation index at: https://docs.raykoi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Events

> The full submission lifecycle, as CustomEvents dispatched on the form element.

Every stage of the submission lifecycle emits a bubbling `CustomEvent` on the `<form>` element, whether or not `data-ui="false"` is set — this is the full order a normal, successful submission fires in, and where it branches on failure:

<Steps>
  <Step title="raykoi:ready">
    Once, when the form has finished attaching. Nothing to do with a submission yet — just confirms Raykoi found and wired up the form.
  </Step>

  <Step title="raykoi:start">
    The visitor clicked submit. Fires before any validation runs.
  </Step>

  <Step title="raykoi:validate">
    Client-side validation is running against the native HTML constraints on your inputs.
  </Step>

  <Step title="raykoi:validation-error — branches here on a bad field">
    Validation failed, client or server side — `event.detail.errors`. The lifecycle stops here; nothing below fires for this attempt.
  </Step>

  <Step title="raykoi:submit">
    Validation passed. The request is now in flight.
  </Step>

  <Step title="raykoi:progress">
    Zero or more times, while uploading files or waiting on the request — `event.detail` matches the SDK's `SubmitProgress` shape.
  </Step>

  <Step title="raykoi:state">
    Fires alongside every transition above (and the two below) — `event.detail.state` is the new state: `idle` → `validating` → `uploading` → `submitting` → `success` | `error` | `aborted`. One event to watch instead of five if all you need is "what phase are we in."
  </Step>

  <Step title="raykoi:success or raykoi:error">
    The outcome. `success`'s `event.detail` is the result; `error` covers anything that isn't a validation failure — network, server, or rate-limit errors.
  </Step>
</Steps>

<Info>
  `raykoi:abort` can fire instead of `success`/`error` if the submission was cancelled — not shown in the sequence above since it can happen at any point after `raykoi:submit`.
</Info>

```javascript theme={null}
document.querySelector('form[data-raykoi]').addEventListener('raykoi:success', (e) => {
  console.log('Submitted:', e.detail);
});
```