Formiz

This component define form scope and manage form logic. It create itself his form if it's not connected to a useForm() form.

Import

import { Formiz } from "@formiz/core";

Props

id

string

Allows you to pass a custom id will be used to create the ids of the fields. By default, it is generated automatically. But for SSR rendering like in NextJS, you may want to replace the automatically generated identifiers by a predictable id.

<Formiz id="custom-id">{/* Your fields here */}</Formiz>

autoForm

boolean | "form" | "step"

Set to true to wrap children in a <form> element with auto onSubmit.

<Formiz autoForm>{/* your fields here */}</Formiz>

connect

Form

Allow you to connect your form with the useForm() hook.

See useForm() documentation for more details

import { Formiz, useForm } from "@formiz/core";
 
const MyForm = () => {
  const form = useForm();
 
  return <Formiz connect={form}>{/* Your fields here */}</Formiz>;
};

initialValues

Values

Allows you to pass some initial values to the form. If a field is mounted, it will lookup into this object to set his initial value. This is usefull when you getting data from an API like an edit page.

<Formiz initialValues={{ input: "initialValue" }}>
  {/* your fields here */}
</Formiz>

initialStepName

string

Allow you to define the initial step

<Formiz initialStepName="step-2">{/* your fields here */}</Formiz>

onSubmit

(values: Values) => void

Function triggered on form submission, whether it is valid or not

<Formiz onSubmit={(values) => console.log(values)}>
  {/* your fields here */}
</Formiz>

onValidSubmit(values)

(values: Values) => void

Function triggered on form submission, only if it is valid

<Formiz onValidSubmit={(values) => console.log(values)}>
  {/* your fields here */}
</Formiz>

onInvalidSubmit(values)

(values: Values) => void

Function triggered on form submission, only if it is invalid

<Formiz onInvalidSubmit={(values) => console.log(values)}>
  {/* your fields here */}
</Formiz>

onValuesChange(values)

(values: Values) => void

Function triggered on any form field value change

<Formiz onValuesChange={(values) => console.log(values)}>
  {/* your fields here */}
</Formiz>

onValid()

() => void

Triggered when the form is valid.

<Formiz onValid={() => console.log("form is valid")}>
  {/* your fields here */}
</Formiz>

onInvalid()

() => void

Triggered when the form is invalid.

<Formiz onInvalid={() => console.log("form is invalid")}>
  {/* your fields here */}
</Formiz>

Try it

{}