Quick start

You only need a couple things to get started with RVF.

Validators

All validation in RVF is done at the form level using a validator. RVF has first-party validation adaptors for zod and yup, but you can also create your own.

Creating a validator

import { withZod } from "@rvf/zod";
import { z } from "zod";

const validator = withZod(
  z.object({
    name: z.string().min(1),
    email: z.string().email().min(1),
  }),
)

Connecting it to your form

By default, RVF let's the browser do most of the heavy lifting, so it must be used with a native html form element (though there is an escape hatch).

  import { useForm } from "@rvf/react";

  const validator = // The validator we created above

  const MyForm = () => {
    const form = useForm({
      validator,
    });

    return (
      <form {...form.getFormProps()}>
        <label>
          Name
          <input name="name" />
        </label>

        <label>
          Email
          <input name="email" />
        </label>

        <button type="submit">Submit</button>
      </form>
    );
  }

Choose how to show your errors

Now you can access your form's validation errors using form.error("fieldName"). It's common to simply display these errors in the UI, but RVF also provides a useNativeValidity hook you can use to display errors using setCustomValidity.

  <label>
    Name
-   <input name="name" />
+   <input name="name" aria-describedby="name-error" />
  </label>
+ {form.error("name") && (
+   <div id="name-error">{form.error("name")}</div>
+ )}

Getting a little more power

With this setup you can use many of the features of RVF. Pretty much all of the RVF features that observe the form will work now.

  • Validation
  • Listening to changes in input values
  • Observing dirty & touched states
  • etc.

Plus a couple other things like:

  • Programmatically moving focus to any field in the form
  • Modifying dirty & touched states

But what we can't do yet is to modify the form's values, either with default values or programmatically modifying the form on the fly.

Wiring up the inputs

To be able to make changes to the form's values, we need to wire up the inputs with form.getInputProps.

-   <input name="name" aria-describedby="name-error" />
+   <input
+     {...form.getInputProps("name")}
+     aria-describedby="name-error"
+   />

Next steps

That's all you really need to get started, but it isn't all RVF can do. Check out the guides or the API reference to learn more about power features like

  • Nested objects and arrays
  • Field arrays
  • Controlled components
  • Creating your own powerful, typesafe abstractions using form scopes.
  • "State mode"