useForm

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

const Z_RegisterInput = z.object({
  name: z.string().optional(),
  email: z.string().email(),
  password: z
    .string()
    // custom error messages to be shown to the user
    .min(8, { message: 'Your password next to have at least 8 characters.' }),
})

type T_RegisterInput = z.infer<typeof Z_RegisterInput>

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

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

  function onSuccess(data: T_RegisterInput) {
    // do something with the data
    console.log(data)
    reset()
  }

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

  return (
    <form onSubmit={handleSubmit(onSuccess, onFailure)}>
      <label htmlFor="name">Full Name</label>
      <input id="name" {...name.inputProps} />

      <label htmlFor="email">E-Mail</label>
      <input id="email" type="email" {...email.inputProps} />
      {email.errorMessage && <p role="alert">{email.errorMessage}</p>}

      <label htmlFor="password">Password</label>
      <input id="password" type="password" {...password.inputProps} />
      {password.errorMessage && <p role="alert">{password.errorMessage}</p>}

      <button type="submit">Login</button>
    </form>
  )
}