RVF (Remix Validated Form)

When using a modern Standard Schema validator, the type of defaultValues is automatically inferred from your schema. The resulting form object methods (such as form.value() and form.setValue()) will use this inferred input type.

Note: If you are using a legacy validator, the type of defaultValues is not inferred from the validator; instead, it is inferred solely from the defaultValues object itself.

const form = useForm({
  schema: z.object({
    name: z.string(),
  }),
  // Type inferred from schema above!
  defaultValues: {
    name: "John Doe",
  },
});

The FieldApi object provides a set of helper methods and properties to manage the state, validation, and DOM properties of a specific field within an RVF form. It allows you to handle values, errors, touched states, and DOM attributes like ref and name easily.

// Example of accessing FieldApi properties
console.log(field.name);
console.log(field.value);
console.log(field.error);
console.log(field.touched);

The FieldArrayApi provides a set of helper methods for interacting with and manipulating arrays of fields within a form. It allows you to add, remove, move, and iterate over items in an array while providing scoped FormApi instances for each individual item.

// Example of using the map method to render array items
myArray.map((key, item, index) => (
  <div key={key}>
    {item.value("name")}
    <button
      type="button"
      onClick={() => {
        myArray.remove(index);
      }}
    >
      Delete
    </button>
  </div>
));

RVF handles nested object structures by treating field names as paths using standard JavaScript dot notation. When naming your <input /> elements, use the name attribute to specify the path to the property within the resulting data object.

const inputs = (
  <>
    <input name="todo.title" />
    <input name="todo.description" />
  </>
)

// The resulting data object will look like:
const result = {
  todo: {
    title: "Take out the trash",
    description: "I should really do this",
  },
}