Introduction
Understand Erlangform, its responsibilities, and the learning path.
Erlangform builds React forms from Zod schemas. Define your data structure, initialize state with TanStack Form, and use ErlForm to render inputs and validation messages. This documentation follows version 1.0.0.
The library started as a way to reduce repetitive work for profile, onboarding, and structured data forms.
Responsibilities
| Part | Responsibility |
|---|---|
| Zod | Data structure and validation rules |
| TanStack Form | Values, metadata, validation, reset, and submission |
| Erlangform | Input inference, rendering, configuration, layout, sections, and wizard steps |
| Your application | HTML form, submit controls, API requests, authentication, and persistence |
Features covered
- Text, password, textarea, number, checkbox, email, URL, select, radio, color, string range, date, time, and file inputs.
- Nested objects, dynamic arrays, matrices, tuples, records, and discriminated unions.
- Dynamic labels and options, showIf, disableIf, readOnlyIf, requiredIf, and clearOnHide.
- Responsive grids, collapsible sections, wizards, server errors, and value subscriptions.
- Custom components, a component registry, metadata inference, and public TypeScript types.
Version 1.0.0 uses Zod; other schema adapters are not available. The root must be z.object(). Mixed unions have no built-in input, and records only render existing keys. See the support matrix for details.
Learning path
- Run the complete example.
- Explore the Basic fields section.
- Configure fields, conditions, and layout.
- Work with objects and arrays.
- Try the feature playground, then use the API reference when integrating your application.