# auro-form The `auro-form` element provides users a way to create and manage forms in a consistent manner. ## Properties | Property | Modifiers | Type | Description | |------------------|-----------|--------------------------------------------------|--------------------------------------------------| | [isInitialState](#isInitialState) | readonly | `boolean` | Returns `true` if no form element has been interacted with or had its value changed since the form was initialized or last reset. | | [validity](#validity) | readonly | `"valid" \| "invalid" \| null` | Returns `'valid'` if all required and interacted-with form elements are valid, `'invalid'` if any are not, or `null` if the form has not been interacted with yet. | | [value](#value) | readonly | `Record` | Returns the current values of all named form elements as a key-value object, keyed by each element's `name` attribute. | ## Methods | Method | Type | Description | |----------|---------------------|--------------------------------------------------| | [reset](#reset) | `(): void` | Resets all form elements to their initial state and fires a `reset` event. The event's `detail.previousValue` contains the form values captured immediately before the reset. | | [submit](#submit) | `(): Promise` | Validates all form elements. If all are valid, fires a `submit` event with `detail.value` containing the current form values. If any element is invalid, its error state is surfaced and the `submit` event is not fired. | ## Events | Event | Type | Description | |----------|--------------------------------------------------|--------------------------------------------------| | [change](#change) | | Fires when a child form element's value changes or the form is initialized. | | [input](#input) | | Fires when a child form element receives user input. | | [reset](#reset) | `CustomEvent<{ previousValue: Record; }>` | Fires when the form is reset. The event detail contains the previous value of the form before reset. | | [submit](#submit) | `CustomEvent<{ value: Record; }>` | Fires when the form is submitted. The event detail contains the current value of the form. | ## Slots | Name | Description | |-----------|-------------------------------------| | [default](#default) | The default slot for form elements. | ## Examples ### Basic Form 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.
Search flights
Submit
See code ```html Search flights
Submit ``` ### Form with Column Layout Auro Form is designed to be completely unstyled by default, allowing developers to use divs, structural elements, or custom CSS to style the form. This example shows that you can use advanced layouts with Auro Form, such as a column layout.
Search flights Last Name

Pick a date range

Start End Start End
Submit
See code ```html
Search flights Last Name

Pick a date range

Start End Start End
Submit
``` ### Complex Form Finally, a more complex form example with multiple form elements, including a date picker and a select element.
First Name
Last Name
Occupation
Cool Fact

Pick a cool date

Choose a date Choose a date

Pick a date range

Start End Start End
Reset Submit
See code ```html First Name
Last Name
Occupation
Cool Fact

Pick a cool date

Choose a date Choose a date

Pick a date range

Start End Start End
Reset Submit
```