A11y Async Button

Addon integration example

Validated async support request

A support intake form uses A11y Form Validator for inline errors and a focused summary, then hands a valid submit to the A11y Async Button form addon for loading, success, error, and visible status feedback.

Quick facts

What this integration covers

Async import
a11y-async-button/addons/form
Validation
A11y Form Validator inline errors and summary
Pattern
Validate first, then simulate a submit request
Network
Local timeout and server-error simulation only

Scenario

A support team is reviewing workspace requests

The user goal is to submit a complete request once, get clear field feedback when validation fails, and understand whether the simulated backend saved, rejected, or timed out.

Live demo

Submit a workspace support request

Try the reserved workspace value admin, leave required fields empty, or choose a simulated response before submitting.

Server-error mode rejects this field after client-side validation succeeds.

Values admin, support, and root fail the async availability rule.

The browser identifies this field when the content is too short.

Request priority

This select controls only the local demo response. No request leaves the page.

Ready to validate and send.

Compact standalone example

Submit with native validation only

This shorter form uses the browser’s built-in constraints and the form addon—no external validator. Change the response to compare success and error states.

Ready to send an invitation.

Options demonstrated

  • validate: true uses native constraint validation.
  • resetDelay: 1800 restores the idle state automatically.
  • preserveWidth avoids layout shift as labels change.
  • preventDoubleClick blocks duplicate submissions.

Try it

  • Submit the empty form to see native validation.
  • Enter an email and compare both simulated responses.
  • Activate the button repeatedly while it is loading.

Try it

Useful checks

Example code

Validate first, then hand off the submit

import { createFormValidator, createDefaultPreset } from "a11y-form-validator";
import { createAsyncButtonForm } from "a11y-async-button/addons/form";

const validator = createFormValidator(form, createDefaultPreset());
createAsyncButtonForm(form, {
  validate: false,
  onSubmit: async ({ formData, setStatus }) => {
    setStatus("Sending request...");
    await sendSupportRequest(formData);
  }
});

Simulated network

Response states shown

Accessibility notes

What changes for users

Validation and focus

  • Native labels, inputs, textarea, radio buttons, checkbox, and submit button behavior remain intact.
  • A11y Form Validator connects inline errors to each control and focuses a linked error summary after blocked submits or server errors.
  • The validation gate runs before the async submit so users do not see loading for known invalid data.

Status and limitations

  • The async form addon keeps repeat submits from starting during the simulated request.
  • The visible status paragraph is a polite live region with text for loading, success, invalid, and error states.
  • The demo vendors the published validator browser assets so it works on static hosting; production apps should import both installed packages.