This TypeScript library aims to simplify the task of generating form fields based on Zod schemas. If you're building forms and using Zod for validation, this library will automate much of the heavy lifting. It provides functionalities to generate form fields with meta-information that could be used for rendering the fields on the frontend.
npm install zod @jlaf/zod-forms
Below shows an example in svelte
<script lang="ts">
import { z } from 'zod';
import { generateForm } from '@jlaf/zod-forms';
const userSchema = z.object({
name: z.string(),
age: z.number(),
});
const formFields = generateForm(userSchema, {
name: {
label: 'First name'
}
})
let value: z.infer<userSchema> = userSchema.default()
</script>
{#each Object.entries(formFields) as [key, formField]}
<label for="key">{formField.meta?.label || key}</label>
<input type="formField.type" bind:value="value[key]" />
{/each}
This setup seems trivial when first looking at it. However, zod-forms is created to work alongside a database layer such as prisma
or drizzle
where you don't generate your own zod schemas.
This libary revolves around the FormField
type. The typelooks as follows:
interface FormField {
type: ['string', 'number', 'boolean', 'array', 'date'];
input: ['input', 'boolean', 'select', 'multiselect', 'date', 'range'];
zodType: z.ZodType<any>;
meta?: FieldMeta;
}
The main function exported by zod-forms is generateForm
. This function returns a Record<string, FormField>
. The usage looks as following:
import { z } from 'zod'
import { generateForm } from '@jlaf/zod-forms'
const userSchema = z.object({
name: z.string(),
age: z.number(),
gender: z.enum(['Male', 'Female', 'Other'])
})
const formFields = generateForm(userSchema, {
name: {
label: 'Firstname'
}
})
The generated object will look like the following:
const formFields = {
name: {
accessor: 'name',
type: 'string',
input: 'input',
validator: z.string(),
meta: {
label: 'Firstname'
}
},
age: {
accessor: 'age',
type: 'number',
input: 'input',
validator: z.number(),
},
gender: {
accessor: 'gender',
type: 'string',
input: 'select',
optionItems: ['Male', 'Female', 'Other'],
validator: z.enum(['Male', 'Female', 'Other']),
}
}
If you want to force the field meta to be of a certain type because you want to use it for automatic form generation you can use the following overrides:
declare module '@jlaf/zod-forms' {
export interface FieldMeta {
label: string
}
}
Feel free to open issues or submit PRs to enhance the functionalities.