Form BuilderPreview
Schema-driven form rendering with TanStack Form, Zod validation, and accessible Cubitt fields.
Form Builder turns a typed Zod schema and a formDefs tree into Cubitt form UI. Use FormBuilder.Single for one record and FormBuilder.Bulk when the same definitions need CSV import, column mapping, grid editing, and row validation.
Usage
import {
FormBuilder,
type FormDefs,
} from "@tilt-legal/cubitt-components/form-builder";const formDefs = [
{
kind: "field",
name: "email",
label: "Email",
component: "email",
size: "full",
},
] as const satisfies FormDefs<Member>;Single
Render a schema-driven form for one record.
Bulk
Import CSV rows, review mapping, edit inline, and submit validated rows.
Form Definitions
Reference for steps, groups, fields, options, and conditional predicates.
Validation
Client, server, row, and group-level validation patterns.
Core Model
import { z } from "zod";
import type { FormDefs } from "@tilt-legal/cubitt-components/form-builder";
const memberSchema = z.object({
firstName: z.string().min(1, "Required"),
lastName: z.string().min(1, "Required"),
email: z.string().email("Invalid email"),
});
type Member = z.infer<typeof memberSchema>;
const memberFormDefs = [
{
kind: "field",
name: "firstName",
label: "First name",
component: "text",
size: "half",
},
{
kind: "field",
name: "lastName",
label: "Last name",
component: "text",
size: "half",
},
{
kind: "field",
name: "email",
label: "Email",
component: "email",
size: "full",
},
] as const satisfies FormDefs<Member>;Utilities
| Utility | Description |
|---|---|
useFormBuilder | Low-level hook for single-record TanStack forms |
useBulkFormBuilder | Low-level hook for bulk row validation |
injectZodErrors | Inject Zod issues into field errors |
injectFormError | Add form-level error messages |
flattenFormDefs | Flatten nested definitions into field metadata |
shapeRows | Coerce CSV rows using field metadata |
mapZodError | Map Zod issues to field paths |
FieldRenderer | Render a field from a definition inside a field context |