@kbml-tentacles/forms

Contract-driven reactive forms for effector. Same fluent-chain design as @kbml-tentacles/core — fields, sub-forms, arrays, sync + async validation, and a full submission orchestrator.

npm install effector @kbml-tentacles/core @kbml-tentacles/forms

Quick start

import { createFormContract, createFormViewModel } from "@kbml-tentacles/forms";

const loginContract = createFormContract()
  .field("email", (f) => f<string>().default("").required("Required"))
  .field("password", (f) =>
    f<string>().default("").custom((v) => (v.length < 8 ? "Too short" : null)),
  );

export const loginForm = createFormViewModel({
  contract: loginContract,
  validate: { mode: "submit" },
});

The returned definition is a ViewModelDefinition<FormShape> from @kbml-tentacles/core, so you mount it like any other view-model (<View model={loginForm}> in React, etc.).

Highlights

• Field builder — .default(), .optional(), .disabled(), .required(), .validate(), .validateAsync(), .dependsOn(), .transform(), .resetOn().
• Composition — .sub(name, contract) for nested forms, .array(name, contract) for repeating rows backed by a real @kbml-tentacles/core model.
• Validation modes — submit (default) | blur | change | touched | all, with separate reValidateOn once a field has been visited.
• Async validators — per-validator debounce, AbortController cancellation, SSR flushAll.
• Aggregates — $values, $errors, $isValid, $isDirty, $isTouched, $isValidating, $isSubmitting, $submitCount.
• Lifecycle events — submitted, rejected, resetCompleted.
• Cross-field rules — .validate(({ values }) => ...) for whole-form invariants (e.g. password match).

Schema validators

Drop in your favorite schema library via the dedicated adapters:

| Library | Package | |---|---| | Zod | @kbml-tentacles/forms-zod | | Yup | @kbml-tentacles/forms-yup | | Valibot | @kbml-tentacles/forms-valibot | | ArkType | @kbml-tentacles/forms-arktype | | Joi | @kbml-tentacles/forms-joi |

Framework bindings

| Framework | Package | |---|---| | React | @kbml-tentacles/forms-react | | Vue | @kbml-tentacles/forms-vue | | Solid | @kbml-tentacles/forms-solid |

Documentation

• Tutorials: your first form
• How-to: define a form contract, add sync validation, add async validation, cross-field validation, work with form arrays, handle submission, reset and keep state, use a schema validator
• Reference: docs/reference/forms

Peer dependencies

• effector ^23.0.0
• @kbml-tentacles/core ^1.0.0

License

MIT © Nikita Lumpov