Validation Message

Inline status text styled with .re-validation-message. Default tone is error; switch via data-tone.

Error (default)

Email Not a valid email address.

<label class="re-field">
  <span class="re-field__label">Email</span>
  <input
    class="re-input"
    id="vm-error-input"
    aria-invalid="true"
    aria-describedby="vm-error"
  />
  <span id="vm-error" class="re-validation-message">Not a valid email address.</span>
</label>

Success

Username Username is available.

<label class="re-field">
  <span class="re-field__label">Username</span>
  <input class="re-input" id="vm-success-input" aria-describedby="vm-success" value="ada" />
  <span id="vm-success" class="re-validation-message" data-tone="success"
    >Username is available.</span
  >
</label>

Hint

Password At least 8 characters.

<label class="re-field">
  <span class="re-field__label">Password</span>
  <input class="re-input" id="vm-hint-input" type="password" aria-describedby="vm-hint" />
  <span id="vm-hint" class="re-validation-message" data-tone="hint"
    >At least 8 characters.</span
  >
</label>

Warning

Coupon code This coupon will expire soon.

<label class="re-field">
  <span class="re-field__label">Coupon code</span>
  <input
    class="re-input"
    id="vm-warning-input"
    aria-describedby="vm-warning"
    value="EXPIRED"
  />
  <span id="vm-warning" class="re-validation-message" data-tone="warning"
    >This coupon will expire soon.</span
  >
</label>

Accessibility

The message is plain text — it has no keyboard interaction or focus of its own. Its accessibility comes entirely from how you wire it to the control.

Semantics — Render it as a <span> (or <p>) and give it an id, then point the control at it with aria-describedby. Screen readers then read the message as the control’s description when the field receives focus. For errors, also set aria-invalid="true" on the control so the field is announced as invalid; this is what turns on the danger border styling (the CSS keys the invalid state off [aria-invalid="true"] and the native :user-invalid).
Tone is visual only — data-tone="success|hint|warning" (default is error) only changes the text colour. It carries no semantics, so assistive tech announces every tone the same way — the wording of the message must convey success, hint, or warning on its own.
Notes — The message is not a live region by default; pair it with aria-describedby (above) so it is announced on focus rather than relying on it being read out the moment it appears. If you need an already-focused field’s error read out immediately, add role="alert" (or aria-live="assertive") to the message yourself. The danger, success, and warning tones each pass WCAG AA contrast against the page background; under forced-colors / High Contrast Mode the colours are replaced by the system palette, so the message stays legible. See the accessibility guide for the full form-control pattern, and Field and Input for the controls these messages describe.