Form

new

A form model for the forms your product is actually built around.

Form connects deeply typed values, validation events, async checks, derived submit state, and your own field components—without hiding the form model behind a UI kit.

Docs

member onboarding

profile.emailvalid

Email shape is valid.

company.planvalid

members[2].rolevalid

Role is available.

live form state

value type: OnboardingForm
dirty: 0 fields
validating: 0 async
can submit: true

59.2Mtotal downloads 2,538,190weekly downloads 6,614GitHub stars

Composition

Build your form system once. Keep every form specific.

Create the field components and defaults your team agrees on, then compose product-specific forms without giving up inference or markup control.

01 / Form hook

useAppForm()

Defaults, validators, submit behavior

02 / Field kit

<form.AppField>

Your inputs, labels, hints, errors

03 / Product form

withForm()

Typed composition for each workflow

Validation orchestration

Run each rule at the speed of the user.

Validation is not one callback. Put each rule at the event where it helps, debounce expensive checks, and expose pending state to the exact surface that needs it.

EventJobGood for

onChange

Shape the value while the user types

Required fields, formatting

onBlur

Wait until the user leaves the field

Longer rules, calmer feedback

onChangeAsync

Debounce work that crosses the network

Username and coupon checks

onSubmit

Guard the final business invariant

Cross-field and server rules

Granular subscriptions

Large forms update in small pieces.

A price preview can listen to the plan. A submit button can listen to canSubmit. Field feedback can listen to its own metadata. The rest of the form stays quiet.

field

1 render

summary

0 renders

submit

1 render

subscription graph

<form.Subscribe>
  selector={(state) => state.canSubmit}
  {canSubmit => (
    <button disabled={!canSubmit}>Save</button>
  )}
</form.Subscribe>

form.state.canSubmit

changed

SaveButton

rendered