Styling the Markup

Raykoi writes plain, unstyled markup with stable class/attribute hooks — you style it, it never ships its own CSS. Before submit — what you write:

<form data-raykoi data-form-id="YOUR_PUBLIC_ID">
  <input type="email" name="email" required>
  <div data-raykoi-error="email"></div>
  <button type="submit">Submit</button>
</form>

After a failed submit — what Raykoi adds:

<form data-raykoi data-form-id="YOUR_PUBLIC_ID" data-raykoi-state="error">
  <input type="email" name="email" required aria-invalid="true" aria-describedby="raykoi-error-email">
  <div data-raykoi-error="email" id="raykoi-error-email" class="raykoi-field-error" data-raykoi-error-type="pattern" role="alert">
    Enter a valid email address
  </div>
  <button type="submit">Submit</button>
</form>

/* Style any phase with pure CSS — no JS needed */
form[data-raykoi-state="submitting"] button { opacity: 0.6; pointer-events: none; }
.raykoi-message[data-raykoi-state="success"] { color: green; }
.raykoi-field-error[data-raykoi-error-type="required"] { font-weight: 600; }

The full selector table (.raykoi-field-error, .raykoi-message, data-raykoi-error-type, and the rest) is in Markup Hooks.