> ## 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.

# Markup Hooks

> The classes and attributes submit.js writes back onto your form, for styling with pure CSS.

Written *by* Raykoi at runtime, not by you — place the containers, and style the classes/attributes in your own CSS. Don't hardcode them into your generated markup.

| Selector                                     | When                                                                                                                                              |
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `[data-raykoi-error="fieldName"]`            | A container for one field's validation message — you place it, Raykoi fills it.                                                                   |
| `[data-raykoi-status]`                       | The success/error message container — omit it and Raykoi creates one automatically.                                                               |
| `.raykoi-field-error`                        | Added to a field error container once it has content.                                                                                             |
| `[data-raykoi-error-type]`                   | `required` \| `pattern` \| `minLength` \| `maxLength` \| `min` \| `max` — style different failure kinds differently without parsing message text. |
| `.raykoi-message`                            | Added to the status container once it has content.                                                                                                |
| `[data-raykoi-state="success"\|"error"]`     | On the status *container*, reflecting the outcome.                                                                                                |
| `[data-raykoi-state]` on the `<form>` itself | The full lifecycle state — `idle` → `validating` → `uploading` → `submitting` → `success` \| `error` \| `aborted`.                                |

See [Customizations](/integrations/customizations/styling) for a before/after example and CSS.