Comment on page
🥇
First wizard example
In 2 minutes you'll get a basic form in your React project:
.png?alt=media)
The example form
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
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 portalimport { 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à! 👨🎨
- 1.
- 2.
- 3.
Last modified 7mo ago