For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/form.md.
A3S UI
  • English
  • next

      • Form

      Organizes related fields, validation summary, and submission into one recoverable task while preserving native browser semantics.

      Save workspace

      Shown in navigation and invitations. Use 2 to 40 characters.

      Receives release notices and ownership transfers.

      Ready to save the workspace.

      Read-only release record

      Only the release owner can rename a published workspace.

      The current value remains part of form submission while editing is blocked.

      Usage

      Import Tailwind and one complete A3S UI style bundle:

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Use form.form for one recoverable task. Field owns each control's label and local error; Form owns grouping, summary validation, submission state, and footer actions.

      <form class="form" novalidate>
  <div data-form-summary role="alert" hidden></div>
  <div class="field">
    <label for="workspace-name">Workspace name</label>
    <input id="workspace-name" class="input" name="workspaceName" required />
    <p data-form-error role="alert" hidden>Enter a workspace name.</p>
  </div>
  <footer>
    <button class="btn" type="submit">Save workspace</button>
    <button class="btn" type="reset" data-variant="outline">Reset</button>
  </footer>
</form>

      Parameters

      ContractPurpose
      form.formCanonical native root for one submission task
      [data-form-summary]Optional summary of multiple failures; keep it empty until validation runs
      [data-form-error] / [role=alert]Local or summary recovery copy; reveal only after failure
      footer with type="submit" / type="reset"Primary and cancel/reset actions for the same task
      data-state="submitting" / aria-busy="true"Prevents duplicate edits and actions while work is in progress
      data-state="invalid" / aria-invalid="true"Form-level failed validation after submit
      data-state="success"Durable local success feedback without clearing entered values
      data-state="error"Host-reported failure that preserves values and recovery focus
      data-readonly / data-state="read-only"Read-only presentation paired with native readonly / disabled submit

      Contract

      SurfaceValue
      Root selectorform.form
      Native root<form>
      Statesready, submitting, success, invalid, error, read-only
      Eventsreset, submit
      Methods—

      Product boundary

      Form owns interaction structure, not requests, permission, or business validation. Do not group unrelated settings or replace specific errors with a permanently disabled submit button.

      The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

      Accessibility

      Errors sit beside their field and can be reached from the summary. Submission preserves input, failure preserves focus context, and every field has a persistent label. While aria-busy="true", pointer interaction is blocked so duplicate submits cannot race the first request.