Flow state

Learn what the flow state is about and how it can be used.

Flow state

In the form element's render function, the getState and setState functions are made available, allowing you to retrieve and modify the multi-step form's state.

Besides these functions, the Formity component also accepts an initialState prop, which can be used to define the starting state of the form.

export default function App() {
  const [output, setOutput] = useState<ReturnOutput<Schema> | null>(null);

  const onReturn = useCallback<OnReturn<Schema>>((output) => {
    setOutput(output);
  }, []);

  if (output) {
    return <Output output={output} onStart={() => setOutput(null)} />;
  }

  return (
    <Formity<Schema>
      flow={flow}
      initialState={initialState}
      onReturn={onReturn}
    />
  );
}

When using this prop, it's common to pass in a previously saved state rather than defining it manually. This allows you to resume from the last completed step.

The state structure is managed internally by Formity and works automatically. You don’t need to create or modify it.