@mwillbanks/tuil-form

Overview

Typed form state, validation, and controlled field adapters for tuil.

@mwillbanks/tuil-form is independently installable and also participates in the umbrella @mwillbanks/tuil runtime where applicable.

Installation

npm install @mwillbanks/tuil-form

How it operates

Form state coordinates field registration, values, touched and dirty state, sync or async validators, submission, reset, and framework adapters.

Documentation flow diagram. register fields; edit; validate; submit or reject; reset/dispose; S0 leads to S1; S1 leads to S2; S2 leads to S3 — **Documentation flow diagram.** register fields; edit; validate; submit or reject; reset/dispose; S0 leads to S1; S1 leads to S2; S2 leads to S3

API

API	Signature	Description
`AdaptedTanStackField`	`interface AdaptedTanStackField`	Public interface AdaptedTanStackField.
`adaptTanStackField`	`function adaptTanStackField`	Public function adaptTanStackField.
`createFormHook`	`export createFormHook`	Public export createFormHook.
`createFormHookContexts`	`export createFormHookContexts`	Public export createFormHookContexts.
`FieldValidator`	`type FieldValidator`	Public type FieldValidator.
`FieldValidators`	`interface FieldValidators`	Public interface FieldValidators.
`FormFieldRegistration`	`interface FormFieldRegistration`	Public interface FormFieldRegistration.
`formOptions`	`export formOptions`	Public export formOptions.
`FormValidationError`	`interface FormValidationError`	Public interface FormValidationError.
`TanStackFieldLike`	`interface TanStackFieldLike`	Public interface TanStackFieldLike.
`TerminalFieldBinding`	`interface TerminalFieldBinding`	Public interface TerminalFieldBinding.
`TerminalFieldController`	`class TerminalFieldController`	Public class TerminalFieldController.
`TerminalFieldOptions`	`interface TerminalFieldOptions`	Public interface TerminalFieldOptions.
`TerminalFieldState`	`interface TerminalFieldState`	Public interface TerminalFieldState.
`TerminalFormController`	`class TerminalFormController`	Public class TerminalFormController.
`TerminalFormProvider`	`function TerminalFormProvider`	Public function TerminalFormProvider.
`useForm`	`export useForm`	A custom React Hook that returns an extended instance of the `FormApi` class. This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
`useRegisterTerminalField`	`function useRegisterTerminalField`	Public function useRegisterTerminalField.
`useStore`	`export useStore`	Public export useStore.
`useTerminalField`	`function useTerminalField`	Public function useTerminalField.
`useTerminalFormController`	`function useTerminalFormController`	Public function useTerminalFormController.
`useTerminalFormSnapshot`	`function useTerminalFormSnapshot`	Public function useTerminalFormSnapshot.
`ValidationContext`	`interface ValidationContext`	Public interface ValidationContext.
`ValidationTrigger`	`type ValidationTrigger`	Public type ValidationTrigger.

Events and lifecycle

State changes are subscription-based. UI controls expose onValueChange, onSubmit, and field-level callbacks.

All subscriptions and registrations return a disposer or belong to an owning runtime that disposes them in reverse order.

Example

const form = createForm({ initialValues: { name: "" }, onSubmit: async (values) => save(values) });