Get started

Install

Install Solid Hook Form package.

npm install solid-hook-form

Example

The following code demonstrates a basic usage example.

import { useForm } from "solid-hook-form";

export const ExampleForm = () => {
  const { register, onSubmit } = useForm({
    defaultValues: {
      name: "",
    },
  });

  const saveExample = (values) => {
    console.log(values);
  };

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

Register fields

To make field value available for form validation and submission you need to register your component into the hook.

Form field name should match a registered component name.

import { useForm } from "solid-hook-form";

export const ExampleForm = () => {
  const { register, onSubmit } = useForm({
    defaultValues: {
      name: "",
      email: "",
      agree: false,
    },
  });

  const saveExample = (values) => {
    console.log(values);
  };

  return (
    <form onSubmit={onSubmit(saveExample)}>
      <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

import { useForm } from "solid-hook-form";

export const ExampleForm = () => {
  const { register, onSubmit } = useForm({
    defaultValues: {
      name: "",
      email: "",
      agree: false,
    },
  });

  const saveExample = (values) => {
    console.log(values);
  };

  return (
    <form onSubmit={onSubmit(saveExample)}>
      <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>
  );
};

TypeScript

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

import { useForm } from "solid-hook-form";

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

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

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

  return (
    <form onSubmit={onSubmit(saveExample)}>
      <input {...register("name")} />
      <input type="email" {...register("email")} />
      <input type="checkbox" {...register("agree")}>
      <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 { useForm } from "solid-hook-form";

export const ExampleForm = () => {
  const { register, errors, onSubmit } = useForm({
    defaultValues: {
      name: "",
      email: "",
    },
  });

  const saveExample = (values) => {
    console.log(values);
  };

  return (
    <form onSubmit={onSubmit(saveExample)}>
      <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>
  );
};