TutimWizard is a component that provides a simple interface for defining the fields and multi-step form behavior, while handling the infrastructure and user interface for you


To use TutimWizard, you will need to install the @tutim/fields and @tutim/headless libraries in your react project. You can do this using npm or yarn:
npm install @tutim/fields @tutim/headless @tutim/types
yarn add @tutim/fields @tutim/headless @tutim/types

Basic example

To create a multi-step form using TutimWizard, you will need to define the fields that you want to include in your wizard. You can do this by creating a config object with a fields property, which is an array of field objects. Each field object should have a key, label, and type property.
Here is an example of how to use TutimWizard to create a simple form with two text input fields:
import React from 'react';
import { FormProvider } from '@tutim/headless';
import { TutimWizard, defaultFields } from '@tutim/fields';
const config = {
fields: [
{ key: 'firstName', label: 'First Name', type: 'text' },
{ key: 'lastName', label: 'Last Name', type: 'text' },
const App = () => {
return (
<div className="App">
<FormProvider fieldComponents={defaultFields}>
<TutimWizard onSubmit={console.log} config={config} />;
export default App;
This will render a form with two text input fields, labeled "First Name" and "Last Name". When the form is submitted, the data entered into the fields will be logged to the console.