Ready for Dev, so its markup, attributes, events and styles can all still change without notice,
it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work
can be seen and reviewed - nothing more.
Form
An accessibility-focused form built on the native <form> element:
<form is="root-form">.
Usage
<form is="root-form">
<label>Email <input type="email" name="email" required /></label>
<button is="root-button" type="submit">Sign up</button>
</form>
On submit the component runs native constraint validation itself: it reflects each control's validity to
aria-invalid, moves focus to the first invalid control (WCAG 3.3.1), and blocks the submit.
When the form is valid it fires a cancelable root-form.submit event carrying the
FormData - call
preventDefault()
on it to intercept and alter the data before it is sent (for example async uploads with previews).
The native validation bubbles are suppressed (novalidate) so the component owns the feedback;
invalid controls also receive a danger-colored border via
[aria-invalid="true"].
Methods
| Method | Description |
|---|---|
validate() |
Validate all controls, reflect aria-invalid, focus the first invalid; returns
true when valid
|
getData() |
Returns a FormData of the current fields |
Events
| Event | Detail | Description |
|---|---|---|
root-form.submit |
{ data: FormData, submitEvent } |
Cancelable; fired on a valid submit before it proceeds |
Extends
HTMLFormElement - use with <form is="root-form">.