Forms

Create a typed form#

@zidomjs/forms models each flat field as its own reactive value and provides validation state, submission handling and cancellation of obsolete work.

tsx

● Zidom

import { createForm } from '@zidomjs/forms';function ProfileForm() {  const form = createForm({ name: '', email: '' }, {    name: value => value.trim().length >= 2 ? undefined : 'Name is too short',    email: value => value.includes('@') ? undefined : 'Enter a valid email'  });  const name = form.field('name');  const email = form.field('email');  return <form onSubmit={(event: Event) => {    event.preventDefault();    void form.submit(async (values, signal) => {      const response = await fetch('/api/profile', {        method: 'POST',        headers: { 'Content-Type': 'application/json' },        body: JSON.stringify(values),        signal      });      if (!response.ok) throw new Error(`HTTP ${response.status}`);    });  }}>    <label htmlFor="profile-name">Name</label>    <input id="profile-name" value={name.value}      aria-describedby="profile-name-error"      onInput={(e: Event) => name.set((e.currentTarget as HTMLInputElement).value)}      onBlur={() => name.touch()} />    <p id="profile-name-error" role="alert">{name.error}</p>    <label htmlFor="profile-email">Email</label>    <input id="profile-email" type="email" value={email.value}      onInput={(e: Event) => email.set((e.currentTarget as HTMLInputElement).value)} />    <button type="submit" disabled={form.submitting}>Save</button>  </form>;}

Field and form APIs#

A field exposes readonly value, error, touched, validating, and dirty signals. It supports set(), touch(), validate() and reset(). form.values() returns a typed snapshot. form.validate() checks all fields and form.submit() first validates, then invokes the submitted handler with values and an abort signal.

Validation timing#

Validation runs when you explicitly call validate() or submit(); do not assume a built-in on-change validator. Async validators get an AbortSignal and late obsolete results are discarded.

Boundaries#

Nested paths, array fields, schema adapters and ready-made accessible input components are not implemented.
Wire error messages to controls with aria-describedby and manage invalid-submit focus in the application.
Client validation is not a security boundary; validate inputs again on the server.

See the full forms reference and enterprise example.

Run the example#

See the Zidom forms example and inspect the exact source next to the result.