Add FormData integration to Input component for native form submission

[KlementMultiverse]

Problem

AgnosticUI's Input component doesn't participate in native HTML form submission when used inside <form> elements. Custom form inputs that don't implement FormAssociated API lose automatic inclusion in FormData and form validation chains.

Current Behavior

When an AgnosticUI Input is placed inside a <form>, calling new FormData(form) omits the input's value entirely. This breaks standard form workflows:

<form id="login">
  <AgInput name="email" />
  <button type="submit">Login</button>
</form>

<script>
  document.getElementById('login').addEventListener('submit', (e) => {
    const data = new FormData(e.target);
    console.log(data.get('email')); // null — input is invisible to FormData
  });
</script>

This forces developers to manually track input state or use framework-specific form libraries, defeating the "framework-agnostic" promise and adding friction for AI-generated forms that expect native semantics.

Why This Matters

1. Accessibility: Screen readers and assistive tools expect inputs to behave like native <input> elements within forms
2. AI Readiness: When Cursor, Claude, or agent-driven UI generators read the AgnosticUI source, they assume FormData integration works—hallucination risk when it doesn't
3. Framework Portability: Developers porting forms between frameworks expect consistent form submission behavior
4. Standards Compliance: The Form Associated Custom Elements API exists precisely for this use case

Expected Behavior

The Input component should:

1. Implement the ElementInternals API via attachInternals()
2. Set the form value using setFormValue() whenever the input value changes
3. Honor the name attribute so it appears in FormData with the correct key
4. Participate in form validation states (:invalid, :valid, :required)
5. Respond to form.reset() and restore its initial value

Reference

Related issue: #274 (Form Associated Custom Elements) identifies this as a priority enhancement.

The Input component lives in src/components/ag/Input/ and is used across all framework implementations. This change would benefit Button (with type="submit"), FormGroup, and all dependent components.

Acceptance Criteria

• Input element responds to new FormData(form) and includes its value
• Input can be reset via form.reset()
• Input participates in form validation (:invalid CSS pseudo-class works)
• All framework implementations (Vue, React, Lit, Svelte) support the behavior
• Documented with example showing FormData integration

---

Contributed by Klement Gunndu

[roblevintennis]

Hi @KlementMultiverse - thanks for submitting this. As you've seen this FACE is top of mind. I'm wondering:

1. Does Fix #274: Implement FACE for AgInput with shared FaceMixin #299 actually fix this?
2. Is this an agnosticui-core version issue?

For 2., I'm going to check myself, but, I suspect the version of agnosticui-core you're using does not have the latest changes in it. If that's the case it's either:
a) You haven't updated to the latest, or
b) I haven't bumped the version yet

Again, I'll try to look into this myself too, but, it would very much help me to track things down if you give me that exact agnosticui-core version you have in your package.json and package-lock.json files.

Thanks again!

[roblevintennis]

Thanks for the detailed report @KlementMultiverse! This is fixed in agnosticui-core@2.0.0-alpha.21 via #299, which implements the Form Associated Custom Elements (FACE) API for AgInput — formAssociated, attachInternals(), setFormValue(), formResetCallback, and constraint validation delegation via syncInnerInputValidity().

To get the fix:

• CLI users: npx agnosticui-cli sync && npx agnosticui-cli add input --force # and any other components you may be using can be added after the input but before the --force separated by a single space
• NPM users: update to agnosticui-core@2.0.0-alpha.21

How this works:
ag sync downloads the latest agnosticui-core from NPM and updates your local ./agnosticui/ reference library. ag add input --force then copies the updated Input (with FACE) from that freshly-synced reference into your project's components directory. The order matters — running ag add --force before ag sync would just re-copy the old version. If you are instead using the NPM package directly (not the CLI), simply updating to agnosticui-core@2.0.0-alpha.21 means your imports will automatically bring in the correct updated version of Input with the latest FACE functionality.

Want to see it working right now? The form-association playbook page at https://www.agnosticui.com/playbooks/form-association.html has live React, Vue, and Lit StackBlitz examples (each opens in a new tab). I just verified the React one in DevTools — form submission correctly surfaces all FACE-connected components via form.elements:

[handleSubmit] form.elements count: 11
  element: tag=AG-INPUT name="fullName" value="Rob Levin"
  element: tag=AG-INPUT name="email" value="me@gmail.com"
  element: tag=AG-INPUT name="phone" value="[MYPHONENUMBER]"
  element: tag=AG-INPUT name="message" value="abc"
  element: tag=AG-RADIO name="contactMethod" value="email"
  element: tag=AG-CHECKBOX name="subscribe" value="yes"
  element: tag=AG-TOGGLE name="terms" value=""
  ...
[handleSubmit] validateAll result: true

Or install it locally: npx agnosticui-cli playbook form-association --framework [react|vue|lit]

Closing as fixed — please reopen if you hit anything further!