Get started

Install

Install Solid Hook Form package.

npm install solid-hook-form

Example

The following code demonstrates a basic usage example.

import { createForm } from "solid-hook-form"

export const ExampleForm = () => {
  const { register, handleSubmit } = createForm({
    defaultValues: {
      name: ""
    }
  })

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} />
      <button type="submit">Save</button>
    </form>
  )
}

Register fields

To make field values available for form validation and submission, you need to register your input elements with the form using the register function.

Form field name should match a registered component name.

import { createForm } from "solid-hook-form"

export const ExampleForm = () => {
  const { register, handleSubmit } = createForm({
    defaultValues: {
      name: "",
      email: "",
      agree: false
    }
  })

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} />
      <input type="email" {...register("email")} />
      <input type="checkbox" {...register("agree")} />
      <button type="submit">Save</button>
    </form>
  )
}

Apply validation

Solid Hook Form makes form validation easy by aligning with the existing HTML standard for form validation.

List of validation rules supported:

required
min
max
minLength
maxLength
pattern
validate

You can read more detail on each rule in the register section.

import { createForm } from "solid-hook-form"

export const ExampleForm = () => {
  const { register, handleSubmit } = createForm({
    defaultValues: {
      name: "",
      email: "",
      agree: false
    }
  })

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name", { minLength: 2, pattern: /[A-Za-z]/ })} />
      <input type="email" {...register("email", { maxLength: 254 })} />
      <input type="checkbox" {...register("agree", { required: true })} />
      <button type="submit">Save</button>
    </form>
  )
}

This library embraces uncontrolled components and native HTML inputs. However, it's hard to avoid working with external controlled components such as Kobalte. To make this simple, we provide a wrapper component, Controller.

Using Component API

import { TextField } from "@kobalte/core/text-field"
import { createForm, Controller } from "solid-hook-form"

export const ExampleForm = () => {
  const { control, handleSubmit } = createForm({
    defaultValues: {
      field: ""
    }
  })

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller 
        control={control}
        name="field"
        render={({ field, fieldState }) => (
          <TextField>
            <TextField.Label>Field</TextField.Label>
            <TextField.Input
              {...field}
              value={field.value()}
              validationState={fieldState.error() ? "invalid" : "valid"}
            />
          </TextField>
        )}
        rules={{
          minLength: { value: 5, message: "Min 5" }
        }}
      />
    </form>
  )
}

Using Hooks API

import { TextField } from "@kobalte/core/text-field"
import { createForm, useController } from "solid-hook-form"

const ControlledInput = (props) => {
  const { field, fieldState } = useController({
    control: props.control,
    name: "firstName",
    rules: { required: true }
  })

  return (
    <TextField>
      <TextField.Label>Field</TextField.Label>
      <TextField.Input
        {...field}
        value={field.value()}
        validationState={fieldState.error() ? "invalid" : "valid"}
      />
    </TextField>
  )
}

export const ExampleForm = () => {
  const { control, handleSubmit } = createForm({
    defaultValues: {
      firstName: ""
    },
    mode: "onChange"
  })

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ControlledInput control={control} />
      <button type="submit">Save</button>
    </form>
  )
}

Handle errors

Solid Hook Form provides an errors accessor to show you the errors in the form. errors' type will return given validation constraints. The following example showcases a required validation rule.

import { createForm } from "solid-hook-form"

export const ExampleForm = () => {
  const { register, errors, handleSubmit } = createForm({
    defaultValues: {
      name: "",
      email: ""
    }
  })

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("name", { required: true })}
        aria-invalid={Boolean(errors.name)}
      />
      {errors.name && <p role="alert">Name is required</p>}

      <input
        {...register("email", { required: "Email is required" })}
        aria-invalid={Boolean(errors.email)}
      />
      {errors.email && <p role="alert">{errors.email.message}</p>}

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

TypeScript

Solid Hook Form is built with TypeScript, and you can define a FormValues type.

import { createForm } from "solid-hook-form"

type ExampleFormValues = {
  name: string;
  email: string;
  agree: boolean;
}

export const ExampleForm = () => {
  const { register, handleSubmit } = createForm<ExampleFormValues>({
    defaultValues: {
      name: "",
      email: "",
      agree: false
    }
  })

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} />
      <input type="email" {...register("email")} />
      <input type="checkbox" {...register("agree")} />
      <button type="submit">Save</button>
    </form>
  )
}