Skip to content

Form

A form that asks the browser for validity, never submits bad data, and tells your script what happened through events.

Signup form

<Form id="signup">
  <TextField id="signup-name" label="Full name" required />
  <TextField id="signup-email" label="Email" type="email" required />
  <Button type="submit">Submit</Button>
</Form>

Events

On submit the form asks the browser (checkValidity), blocks the submit when invalid, moves focus to the first bad control, and fires one of:

document.addEventListener("ink:form:invalid", () => {
  // show a summary, log, etc.
});

document.addEventListener("ink:form:valid", () => {
  // send via fetch, then reset
});

Why novalidate

The form sets novalidate so duplicate browser bubbles do not fight your design; validation still uses the same native engine throughcheckValidity, and error text remains yours.

Accessibility