Creating forms
OnChange mode

OnChange mode


There are two types of form input in React. We have the uncontrolled input and the controlled input. When using controlled forms, the input value is set to state values and then updated via React events. Defining a form input value via state is considered a controlled component. For controlled inputs, you will need a corresponding state and then a function to update that state with changes.

Controlled inputs are the most popular in the react ecosystem, are easier to write and understanding. But when you think about performance controlled inputs are less powerful than uncontrolled inputs.Every time that component state is updated the component is rendered again and this affects the performance result.


Createform provides a register function, this function returns all properties to manager a field.

import { createForm } from "@createform/react";
const useForm = createForm({
  initialValues: {
    name: "Anna",
    address: [
        street: "123 Main St",
        city: "Anytown",
  mode: "onChange",
const test = "";

Use dot notation to create advanced objects or to map object values. Type an entry name and type or an entry property object.

  • Dot notation is used to access nested objects. For example, if you have an object with a nested object, you can access the nested object using dot notation;
  • Use dot notation to access nested arrays. For example, if you
  • have an object with a nested array, you can access the nested array using dot notation; info.array[2].
function Form() {
  const { register } = useForm();
  return (
      <input {...register("name")} />
      <input {...register("address.street")} />
      <input {...register("")} />