First wizard example

Result
In 2 minutes you'll get a basic form in your React project:
The example form
Step1: Install
To use TutimWizard, install the @tutim 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
Step 2: Run
To create a form using TutimWizard, you will need to define the form schema.
In this example, the schema is hard-coded in config, but you can craft your wizard in the portal
import { TutimWizard, defaultFields } from "@tutim/fields";
import { FormProvider } from "@tutim/headless";
​
// The form's schema
const config = {
  fields: [
    {
      key: "fullname",
      label: "Full Name",
      type: "text",
      isRequired: true
    },
    { key: "date", label: "Pick a date", type: "date" },
  ],
};
​
​
// Your App
const App = () => {
  return (
    <div className="App">
      <FormProvider fieldComponents={defaultFields}>
        <TutimWizard onSubmit={console.log} config={config} />;
      </FormProvider>
    </div>
  );
};
​
export default App;
Voilà! 👨‍🎨
Next steps
1.Craft your own form schema with the builder or manual configuration:
2.Use your own design system with FormProvider​
3.Have a question? Join our Discord :)
​

Welcome 🍓

Next - Overview

Tutim Tools

Last modified 7mo ago

First wizard example

Result

Step1: Install

Step 2: Run

Next steps

​