<auro-form> is a HTML custom element designed to serve as the base logic for all auro-constructed forms.

It automatically "scrapes" its inner content for any auro form elements, and surfaces them (along with events) to the parent form element as a JSON object.

Auro form exists to make a developer's life easier through surfacing all Auro form elements in a given form as a single JSON object. The most common use case the Auro team identified when building Form was the need to collect form data in a structured way.

The following is required on each Auro form element in a form for it to be collected automatically:

1. It must have a name attribute. This is required in vanilla HTML forms, and we follow the same pattern.
2. It must be an Auro form element. See the section on custom elements for more information.

That being said, we do not require form elements to be direct children of auro-form. They can be nested within other elements for styling, such as a div, span or fieldset.

In a correctly registered scenario, auro-form will automatically recognize the auro form elements and collect data from each on the form's value key as a JSON object.

Each element will be added using the element's name attribute as the key, and the element's value as the value.

As Auro components are designed to be framework-agnostic, data can be retrieved using simple vanilla JavaScript patterns. If you have ever worked with a standard HTML5 form, you are already equipped to work with Auro forms!

Once you have a reference to the form element (React ref, querySelector, etc.), you can access the form data using the following methods:

Data Keys + Get Methods:

• .value - Getter which returns the current form data as a JSON object.
• .validity - Returns the current validity state of the form (valid or invalid).

Extra Information:

• .isInitialState - Returns a boolean indicating if the form is in its initial state.

Events:

• input - Fires when the form state changes.
• reset - Fires when the form is reset.
• submit - Fires when the form is submitted.

The most basic form implementation requires an auro-input and an optional auro button with type="submit".

By default, Auro Form connects a submit event to all type="submit" buttons within the form.

<auro-form>
  <auro-input id="search-box" name="searchBox" required>
    <span slot="label">Search flights</span>
  </auro-input>
  <br />
  <auro-button type="submit">Submit</auro-button>
</auro-form>