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

# Styling the Markup

> Raykoi writes plain, unstyled markup with stable hooks — you own all the CSS.

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

**Before submit** — what you write:

```html theme={null}
<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:

```html theme={null}
<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>
```

```css theme={null}
/* 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](/integrations/options-reference/markup-hooks).