createForm

createForm is a function used to create a form instance. It takes one object as a requiredargument. The following example demonstrates all of its properties and methods.

Props

Name	Type	Description
defaultValues	Object	Default values for the form.
mode	string	Validation strategy. Defaults to 'onChange'.
resolver	Resolver	Integrates with your preferred schema validation library.

defaultValues

The defaultValues prop populates the entire form with default values. You must provide defaultValues for all form fields to ensure type safety and proper form initialization.

createForm({
  defaultValues: {
    firstName: "",
    lastName: ""
  }
})

mode

This option allows you to configure the validation strategy.

Name	Type	Description
onSubmit	string	Validation is triggered on the submit event.
onChange	string	Validation is triggered on the change event for each input. Only updated fields will be re-rendered.

createForm({
  mode: 'onChange'
})

This function allows you to use any external validation library such as Yup, Zod and many others. The goal is to make sure you can seamlessly integrate whichever validation library you prefer. If you're not using a library, you can always write your own logic to validate your forms.

Install @hookform/resolvers package

npm install @hookform/resolvers

Define a schema:

import z, { object, string, number } from "zod"

const formSchema = object({
  name: string().min(1, "Required"),
  age: number()
})

type FormValues = z.infer<typeof formSchema>

Apply resolver:

import { zodResolver } from '@hookform/resolvers'
import { createForm } from 'solid-hook-form'

const ExampleForm = () => {
  const { register, handleSubmit } = createForm<FormValues>({
    defaultValues: {
      name: '',
      age: 0
    },
    resolver: zodResolver(formSchema)
  })

  const onSubmit = (values: FormValues) => {
    console.log(values)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register('name')} />
        <input type="number" {...register('age', { valueAsNumber: true })} />
        <button type="submit">Save</button>
    </form>
  )
}

Returns

The following list contains reference to createForm return props.