TutimWizard

Overview

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

Installation

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} />;
      </FormProvider>
    </div>
  );
};

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.