Forms

Use form-associated fields with name, FormData, VuForm, and v-model across frameworks.

Before you begin

Packages installed for your stack (see Installation)
App wrapped in VuThemeProvider / vu-theme-provider

Form-associated fields

Many Velkin fields are form-associated custom elements. Give them a name, put them in a form, and they participate in FormData, validation, and reset like native controls.

Set name so the control submits with the form
Use value / checked for controlled UI, or defaultValue / defaultChecked for reset behavior
Prefer documented validity APIs (checkValidity, reportValidity) and field props like required / showErrors
Prefer VuForm when you want integrated validation and vu-submit — native <form> still works

Across frameworks

import { VuForm } from "@velkin/react/form";
import { VuInput } from "@velkin/react/input";
import { VuButton } from "@velkin/react/button";

<VuForm
  onVuSubmit={(e) => {
    e.preventDefault();
    const data = new FormData(e.target as HTMLFormElement);
    console.log(Object.fromEntries(data.entries()));
  }}
>
  <VuInput name="email" label="Email" type="email" required showErrors />
  <VuButton type="submit" color="primary">
    Continue
  </VuButton>
</VuForm>

Common problems

Problem	Fix
Field missing from submit payload	Set `name` on the field
Listening for native `submit` on `VuForm`	Use `onVuSubmit` / `@vu-submit`
Controlled value not updating	Wire `onVuChange` + `e.detail`, or Vue `v-model:*`

Next steps

Events — vu-change, vu-submit, v-model:*
Form and field component docs