Form
/ Guides
Form
/ Guides

Basic Usage

In this guide, we'll build a simple registration form step by step.
You'll learn the following concepts:

  • Using the APIs
  • Validation with Zod
  • Handling Form Submission

Note: We'll focus on the form logic and validation, not the UI. The provided code snippets are minimalistic and not best practices when it comes to UX and accessibility.

Creating a Schema

First, we need to create a Zod schema that defines the form fields and their validation rules.
This is the single source of truth for the form data. Whatever the schema defines will also be used for validation.

import { z } from 'zod'

const Z_RegisterInput = z.object({
  name: z.string().min(1),
  email: z.string().email()
  password: z.string().min(8)
})

Creating Form Fields

Now that we have a schema, we can already create form fields within our components.
Doing so, we'll use the useForm hook with the provided schema to create all the form utils.

'use client'
import { useForm } from '@weser/form'

function RegisterForm() {
  const { useFormField } = useForm(Z_RegisterInput)

  const name = useFormField('name')
  const email = useFormField('email')
  const password = useFormField('password')
}

Rendering Form Fields

Now that we have the form fields, we can use them to render the input fields.
For this guide, we'll just use the inputProps to pass to the input fields. You can of course create your own components based on any data provided by the field object.

'use client'
import { useForm } from '@weser/form'

function RegisterForm() {
  const { useFormField } = useForm(Z_RegisterInput)

  const name = useFormField('name')
  const email = useFormField('email')
  const password = useFormField('password')

  return (
    <form>
      <input {...name.inputProps} />
      <input type="email" {...email.inputProps} />
      <input type="password" {...password.inputProps} />
      <button type="submit">Sign up</button>
    </form>
  )
}

Submitting the Form

Finally, we want to submit the form and do something with the data.
Additionally, we want to handle errors and reset the form.
This is what the handleSubmit and reset functions is for.

'use client'
import { z, ZodError } from 'zod'
import { useForm } from '@weser/form'

type T_RegisterInput = z.infer<typeof Z_RegisterInput>

function RegisterForm() {
  const { useFormField, handleSubmit, reset } = useForm(Z_RegisterInput)

  const name = useFormField('name')
  const email = useFormField('email')
  const password = useFormField('password')

  function onSuccess(data: T_RegisterInput) {
    console.log(data)
    reset()
  }

  function onFailure(error: ZodError) {
    console.error(error)
  }

  return (
    <form onSubmit={handleSubmit(onSuccess, onFailure)}>
      <input {...name.inputProps} />
      <input type="email" {...email.inputProps} />
      <input type="password" {...password.inputProps} />
      <button type="submit">Sign up</button>
    </form>
  )
}

And that's it! With just a couple lines of code, we get a fully working registration form with validation and submission handling.

On this page