Components

Form

TanStack Form state and validation with Dowel fields, errors, actions, and submit behavior pre-bound.

Composed form

useDowelForm keeps TanStack Form's typed state model while removing the repetitive wiring between fields and Dowel controls.

tsx

const form = useDowelForm({
  defaultValues: { title: "", description: "" },
  onSubmit: ({ value }) => createIssue(value),
});

<form.AppForm>
  <form.Root>
    <form.AppField
      name="title"
      validators={{
        onBlur: ({ value }) => value ? undefined : "Title is required",
      }}
    >
      {(field) => <field.TextField label="Title" />}
    </form.AppField>
    <form.AppField name="description">
      {(field) => <field.TextareaField label="Description" />}
    </form.AppField>
    <form.Actions>
      <form.SubmitButton>Create issue</form.SubmitButton>
    </form.Actions>
  </form.Root>
</form.AppForm>

The adapter currently includes TextField and TextareaField. Both bind value, blur, name, touched validation, descriptions, and accessible error output. Use withDowelForm and withDowelFieldGroup to compose reusable forms without losing inferred value types.