Formiz

This component creates a form context.

Import

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

Props

id

Allows you to pass a custom id, which will be used to create the ids of the fields. By default, it is generated automatically.

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

autoForm

boolean | 'form' | 'step'

• Set to true or 'form' to wrap children in a <form> element with auto submit() on form submission.
• Set to 'step' to wrap children in a <form> element with auto submitStep() on form submission.

<Formiz autoForm>
  {/* your fields here */}
  <button type="submit">Submit</button>
</Formiz>

connect

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

Object

Allow 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 are getting data from an API like an edit page.

<Formiz initialValues={{ myField: "my initial value" }}>
  {/* 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) => void

Function triggered on form submission, only if it is valid.

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

onInvalidSubmit(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) => 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>