Example 07 ยท Conditional fields addon

Validate only the active path.

A workspace request keeps sponsor fields disabled while they are hidden. Server errors follow the active choice, and the addon synchronizes conditional state before focus recovery.

Personal utility

Keep hidden fields out of errors.

Sponsor details become required only when the request is for an external collaborator.

Try it

  1. Keep sponsor details hidden and apply the rejected response.
  2. Notice that only the visible requester email receives an error.
  3. Reset, then select external collaborator access with Space.
  4. Apply the response again and correct the now-active sponsor email.
addon.conditional-fieldsactive fields only

Workspace access request

Visible choices determine which fields the server can reject.

Use the address that should receive access updates.

Sponsor details are required only for external collaborators.

Sponsor details are inactive.

Implementation

Synchronize, then recover focus.

Developer notes

  • The root selector is #conditional-fields-demo; conditional content uses [data-condition-target].
  • Import createConditionalFieldsAddon from ../../dist/addons/conditional-fields.js.
  • Pass an existing instance with refresh() and show(id) methods.
  • refreshBeforeReveal synchronizes the active conditional state before error focus runs.
  • The application chooses a server payload that matches the submitted conditional state.

Accessibility notes

  • A native checkbox controls the section and exposes its target and expanded state.
  • Hidden controls are disabled and not required, so they are excluded from resolution and submission.
  • Visible conditional controls are enabled before they can receive a server error.
  • Editing the active field clears only its owned error state.
  • Changing the condition clears stale server errors before updating the available fields.
  • The demo adds no motion; shared styles cover reduced motion and forced colors.
  • The local object demonstrates the addon contract, not the complete optional peer.

Copy path

How to use it.

  1. Disable controls while their conditional region is hidden.
  2. Make fields required only while their condition is active.
  3. Apply only server errors that belong to the submitted conditional state.

HTML

<form id="access-form" data-a11y-server-error-bridge>
  <div data-a11y-server-error-bridge-form-errors></div>
  <input type="checkbox" aria-controls="sponsor-details">
  <section id="sponsor-details" data-condition-target hidden>
    <label for="sponsor-email">Sponsor email</label>
    <input id="sponsor-email" name="sponsorEmail" disabled>
  </section>
  <button type="submit">Request access</button>
</form>

JavaScript

import { createServerErrorBridge } from "../../dist/index.js";
import { createConditionalFieldsAddon } from
  "../../dist/addons/conditional-fields.js";
import { createConditionalFields } from
  "a11y-conditional-fields";

const form = document.querySelector("#access-form");
const conditionalFields = createConditionalFields(form, {
  disableWhenHidden: true
});
const bridge = createServerErrorBridge(form, {
  focusOnApply: "first-invalid",
  addons: [createConditionalFieldsAddon({
    instance: conditionalFields,
    refreshBeforeReveal: true
  })]
});