# 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:

```bash
npm install @tutim/fields @tutim/headless @tutim/types
```

```bash
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 >>>](https://codesandbox.io/s/tutim-examples-5ny73h)

```jsx
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.