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:

Open with CodeSandbox >>>

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.

Last updated