Example 01 ยท Basic

Apply one useful rejection.

A minimal account form receives one field error and one form-level message. The bridge links the error, marks the field invalid, manages focus, and clears the field state on edit.

Scenario

The address is already registered.

The application owns submission and gives the rejected response to the bridge.

Try it

  1. Activate Apply server errors.
  2. Notice focus move to the form message.
  3. Edit the email and confirm its field error clears.
  4. Reset the demo to restore the initial state.
local.demo409 conflict

Create your account

No data leaves this page.

Implementation

What to copy.

Developer notes

  • Root: [data-a11y-server-error-bridge]
  • Optional form region: [data-a11y-server-error-bridge-form-errors]
  • Initialization: createServerErrorBridge(form)
  • Assets: dist/index.js and dist/styles.css

Accessibility notes

  • The native label remains the field's accessible name.
  • Error text is linked through descriptions and aria-errormessage.
  • Standard keyboard behavior is unchanged.
  • The demo adds no animation; shared styles still honor reduced motion and forced colors.
  • Real applications still need testing with their own responses and assistive technology.

Copy path

How to use it.

  1. Load the package stylesheet and add the bridge data attribute to your form.
  2. Create one bridge instance after the form exists.
  3. Pass the rejected server payload to applyErrors(); call clearErrors() after success or reset.

HTML

<link rel="stylesheet" href="../../dist/styles.css">

<form id="account-form" data-a11y-server-error-bridge>
  <div data-a11y-server-error-bridge-form-errors></div>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email">
  <button type="submit">Create account</button>
</form>

JavaScript

import { createServerErrorBridge } from "../../dist/index.js";

const form = document.querySelector("#account-form");
const bridge = createServerErrorBridge(form);

// Use the rejected payload returned by your application.
bridge.applyErrors({
  fields: { email: "An account already uses this email." },
  form: ["The account could not be created."]
});