Quick Start
Install Erlangform 1.0.0 and build your first React form.
This documentation follows Erlangform 1.0.0. The package is called erlangform and its main component is ErlForm. Use the language menu to switch between English and Bahasa Indonesia without leaving the current topic.
Installation
npm install erlangform@1.0.0 zod@^4 @tanstack/react-form@^1The implementation uses React 19, Zod 4, and TanStack Form 1. Built-in styles load automatically; no separate CSS import is needed. Developing the library from source requires Node.js 22 and pnpm 10.19.0.
Preview
Complete example
"use client";
import { useForm } from "@tanstack/react-form";
import { ErlForm, type FieldConfig } from "erlangform";
import { z } from "zod";
const schema = z.object({
name: z.string().min(2, "Use at least 2 characters"),
email: z.email("Enter a valid email"),
});
type Values = z.infer<typeof schema>;
const fieldConfig = {
name: { label: "Name", placeholder: "Full name" },
email: { label: "Email" },
} satisfies FieldConfig<Values>;
export default function ProfileForm() {
const form = useForm({
defaultValues: { name: "", email: "" } satisfies Values,
validators: { onChange: schema },
onSubmit: async ({ value }) => { console.log(value); },
});
return (
<form onSubmit={(event) => {
event.preventDefault();
void form.handleSubmit();
}}>
<ErlForm<Values> form={form} schema={schema} fieldConfig={fieldConfig} />
<form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]}>
{([canSubmit, isSubmitting]) => (
<button type="submit" disabled={!canSubmit || isSubmitting}>
{isSubmitting ? "Saving…" : "Save"}
</button>
)}
</form.Subscribe>
<button type="button" onClick={() => form.reset()}>Reset</button>
</form>
);
}Call useForm inside a React component. ErlForm renders fields, not the HTML form element or submit button; your application provides both.
Three parts to prepare
schemadescribes the structure and Zod rules. The root must bez.object().defaultValuesinitializes form state, including nested objects and arrays.- Optional
fieldConfigcontrols labels, choices, layout, and conditional behavior.
Passing a schema to ErlForm does not install a validator: also connect it to validators. Schema defaults do not automatically populate TanStack Form state.
Continue with schema support, field configuration, and validation and submission.