Getting Started
Declarative form components for React with 40+ field types
What is @letar/forms?
A comprehensive React form library that combines the power of TanStack Form with Chakra UI v3 components and Zod schema validation.
Key principles:
- Schema-driven — validation rules and UI metadata live in Zod schema
- Declarative — JSX contains only layout and field names
- Type-safe — full TypeScript inference from schema to form values
- Batteries included — 40+ field types, multi-step forms, offline mode, i18n
Quick Example
import { Form } from '@letar/forms'
import { z } from 'zod/v4'
const Schema = z.object({
name: z
.string()
.min(2)
.meta({ ui: { title: 'Full Name' } }),
email: z
.string()
.email()
.meta({ ui: { title: 'Email' } }),
role: z.enum(['admin', 'user']).meta({ ui: { title: 'Role' } }),
})
function MyForm() {
return (
<Form
schema={Schema}
initialValue={{ name: '', email: '', role: 'user' }}
onSubmit={async ({ value }) => {
await saveUser(value)
}}
>
<Form.Field.String name="name" />
<Form.Field.String name="email" />
<Form.Field.Select name="role" />
<Form.Button.Submit>Save</Form.Button.Submit>
</Form>
)
}Live Demo
Try it yourself — this is a real interactive form:
Auto-Generated Forms
If you want zero JSX for fields, use Form.FromSchema:
<Form.FromSchema schema={Schema} initialValue={data} onSubmit={handleSubmit} submitLabel="Create" />This automatically renders all fields based on the Zod schema types and UI metadata.