Comment on page
TutimWizard
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 youTo 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
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} />;
</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.
Last modified 7mo ago