Forms that are Streamlined
Finally, a package to easily create forms, validate them, and organize related backend logic.
const registerForm = form.create("Register Form", {
username: field.text({
label: "Username",
placeholder: "Your Username",
validation: z.string().min(1),
}),
password: field.password({
label: "Password",
placeholder: "Your Password",
})
});
Trusted features
Lightweight and edge ready
Integrates with zod
Type safety
Extendable
Organized Conventions
Client and server validation
function RegisterPage() {
return (
<h1>{registerForm.name}</h1>
<form>
{registerForm.fields.map((field) => (
<>
<label>{field.label}</label>
<input {...field} />
</>
))}
</form>
)
}
const welcomeForm = form.create("Welcome Form", {
username: field.text({
label: "Username",
placeholder: "Username",
required: true,
validation: z.string().min(1).max(5),
}),
about: field.textArea({
label: "About",
placeholder: "About",
validation: z.string().min(30).max(50),
}),
});
function handleForm(formData: FormData) {
const result = registerForm.validate(formData);
if (result.success) {
// auto typed and casted as a number
const { age } = result.data;
console.log(age);
}
}
// add user to database using drizzle
registerForm.pipeline.add((data) => {
await db.insert(users).values(data);
})
// send email using resend
registerForm.pipeline.add((data) => {
await resend.emails.send({
from: 'hello@example.com',
to: data.email,
subject: 'Welcome!',
html: `Welcome ${data.username}`
});
})
// run the pipeline
registerForm.pipeline.run();