Form

A native form with consolidated error handling. Submit https://example.com in the demo to see a mapped field error. color passes through to descendant fields.

Anatomy

<UiForm :errors="errors" @form-submit="onSubmit">
  <UiFieldRoot name="url">
    <UiFieldLabel>Homepage</UiFieldLabel>
    <UiFieldControl type="url" required />
    <UiFieldError />
  </UiFieldRoot>
  <UiButton type="submit">Submit</UiButton>
</UiForm>

Parts

  • Form — native <form novalidate>. errors is a map of field name to message. @form-submit receives the values as an object after client validation passes.
  • Field — name must match the errors key. Empty Error shows the native or server message.

validationMode defaults to onSubmit, then fields re-validate on change. Use UiButton with type="submit" — the default button type does not submit.