The native <form> element handles submission and reset for standard HTML inputs, but it has no awareness of web components, cannot orchestrate validation across custom elements, and provides no centralized state management. auro-form fills these gaps for applications built with Auro components.

Native <form> relies on the browser's form association API, which web components must explicitly opt into via ElementInternals. Even when they do, coordinating validation state, required fields, and submission values across a mix of Auro components requires custom JavaScript.

auro-form automatically discovers and manages:

• auro-input
• auro-select
• auro-datepicker
• auro-combobox
• auro-checkbox-group
• auro-radio-group
• auro-counter-group

New elements added to the DOM are detected via MutationObserver and integrated automatically.

Native forms validate each input independently. There is no built-in way to check "are all required fields valid?" without querying each element manually.

auro-form provides:

• A single validity getter that returns 'valid', 'invalid', or null based on the aggregate state of all child form elements
• Automatic validation of all elements on submit() — each element's validate(true) is called to force error display
• Per-element validity tracking via an internal formState object
• Listening for auroFormElement-validated events from child components to stay in sync

Native forms have no concept of "has the user touched anything?" or "what are all the current values?"

auro-form tracks:

• value — A key-value object of all form element values, keyed by element name
• isInitialState — Whether any element has been modified since initialization
• Submit/reset button state — Submit and reset buttons are automatically disabled based on form state (e.g., reset is disabled when the form is in its initial state)

Native form submission navigates to a URL or requires event.preventDefault() and manual value extraction.

auro-form simplifies this:

• submit() — Validates all elements. If valid, dispatches a submit event with a detail.value object containing all form values. No page navigation.
• reset() — Resets all child elements to their initial state, dispatches a reset event with detail.previousValue containing the pre-reset values.
• Enter key — Pressing Enter on a form element triggers submit(), matching native form behavior. Textareas are excluded to allow newlines.

Each Auro component dispatches its own events (auroSelect-valueSet, auroDatePicker-valueSet, etc.). Listening for all of these individually is error-prone.

auro-form normalizes events:

• input — Fired when any child element receives user input
• change — Fired when any child element's value changes, or when the form is initialized
• submit — Fired with aggregated form values on valid submission
• reset — Fired with previous values on reset