Form

A form component for validation, FormData, and submit coordination.

vu-form · @velkin/react/form

Copy page

Import

React

npm i @velkin/react

import { VuForm } from "@velkin/react/form";

Prop	Type	Default	Description
liveValidation	`boolean`	false	Validates and emits `vu-change` on value changes. Default: `false`.
showErrors	`boolean`	true	Activates error display on child fields after submit/invalid. Default: `true`.
mode	VuFormMode	"client"	Submission mode (`client` or `server`). Default: `"client"`.
method	VuFormMethod	—	Native form method in server mode.
action	`string`	—	Native form action in server mode.
target	`string`	—	Native form target in server mode.
enctype	VuFormEnctype	—	Native form encoding type.
autocomplete	VuFormAutocomplete	—	Native form autocomplete behavior.
noValidate	`boolean`	false	Disables native HTML constraint UI. Default: `false`.
enterSubmit	`boolean`	false	Submits on Enter for non-textarea controls. Default: `false`.
resetOnSubmit	`boolean`	false	Resets form after successful submit. Default: `false`.
csrfToken	`null \| string`	null	Optional CSRF token value for app-level submit handling.

Event	Detail	Description
vu-change	VuFormChangeDetail	When form values change in live validation mode.
vu-invalid	VuFormInvalidDetail	When aggregated validation errors change.
formdata	VuFormFormDataFallbackDetail	Before client-mode submit with form data.
vu-submit	VuFormSubmitDetail	After successful client-mode submit handling.

Slot	Description
—	- Form controls and actions projected into the native `<form>`.

Part	Description
form	Native `<form>` element.

Method	Description
checkValidity	- Returns native form validity without UI reporting.
reportValidity	- Returns native form validity and reports native UI messages.
requestSubmit	- Requests submission using optional submitter.
reset	- Resets native form and values.
submit	- Submits form using mode-specific client/server flow.

Name	Definition
string \| null	`null \| string`
VuFormAutocomplete	`"on" \| "off"`
VuFormChangeDetail	`{ values: VuFormValues; formData: FormData; success: boolean; }`
VuFormEnctype	`"application/x-www-form-urlencoded" \| "multipart/form-data" \| "text/plain"`
VuFormFormDataFallbackDetail	`{ formData: FormData; }`
VuFormInvalidDetail	`{ errors: string[]; }`
VuFormMethod	`"get" \| "post"`
VuFormMode	`"client" \| "server"`
VuFormSubmitDetail	`{ values: VuFormValues; formData: FormData; success: boolean; }`