{"id":16628345,"url":"https://github.com/prabhuignoto/react-wizardry","last_synced_at":"2026-04-02T02:18:26.349Z","repository":{"id":38012094,"uuid":"483776567","full_name":"prabhuignoto/react-wizardry","owner":"prabhuignoto","description":"🪄 Multi step forms with in built validations","archived":false,"fork":false,"pushed_at":"2022-10-31T18:46:20.000Z","size":3191,"stargazers_count":40,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-01T07:23:25.717Z","etag":null,"topics":["forms","multistep-react-form","react-forms","react-wizard","wizard","wizard-steps"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prabhuignoto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-20T18:51:51.000Z","updated_at":"2024-05-28T16:49:14.000Z","dependencies_parsed_at":"2023-01-19T13:39:23.353Z","dependency_job_id":null,"html_url":"https://github.com/prabhuignoto/react-wizardry","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Freact-wizardry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Freact-wizardry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Freact-wizardry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Freact-wizardry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prabhuignoto","download_url":"https://codeload.github.com/prabhuignoto/react-wizardry/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244822635,"owners_count":20516143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["forms","multistep-react-form","react-forms","react-wizard","wizard","wizard-steps"],"created_at":"2024-10-12T04:32:22.932Z","updated_at":"2026-04-02T02:18:21.322Z","avatar_url":"https://github.com/prabhuignoto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"\" rel=\"noopener\"\u003e\n \u003cimg src=\"./logo.svg\" alt=\"Project logo\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-wizardry)\n[![Snyk](https://snyk.io/test/github/prabhuignoto/react-wizardry/badge.svg)](https://snyk.io/test/github/prabhuignoto/react-wizardry)\n[![Version](https://badgen.net/npm/v/react-wizardry)](/Version)\n\u003c!-- [![DeepSource](https://deepsource.io/gh/prabhuignoto/react-wizardry.svg/?label=active+issues\u0026token=Ee287EMM6gK3NGg-jjAbMeKj)](https://deepsource.io/gh/prabhuignoto/react-wizardry/?ref=repository-badge) --\u003e\n\n\u003c/div\u003e\n\n\u003e react-wizardry is a data-driven smart wizard component for creating powerful forms with in built validations.\n\n---\n\n![demo](./react-wizardry.gif)\n\n[Demo](https://codesandbox.io/s/react-wizardy-multi-forms-io9ey5)\n\n\u003ch2\u003eFeatures\u003c/h2\u003e\n\n- ⚡Data driven API\n- ✅In built validations\n- 💪Built with Typescript\n- 💡Intuitive stepper interface\n- 🎨Customizable Theme\n\n\u003ch2\u003eTable of Contents\u003c/h2\u003e\n\n- [📦 Installation](#-installation)\n- [🚀 Getting Started](#-getting-started)\n- [⚙️ Properties](#️-properties)\n- [Page](#page)\n- [Form field](#form-field)\n- [Form field types](#form-field-types)\n- [Accessing the wizard data](#accessing-the-wizard-data)\n- [Custom validation messages](#custom-validation-messages)\n- [Custom icons](#custom-icons)\n- [🎨 Theme](#-theme)\n- [CodeSandbox examples](#codesandbox-examples)\n- [⛏️ Built With](#️-built-with)\n- [✍️ Authors](#️-authors)\n\n## 📦 Installation\n\nInstall the package via `npm` or `yarn`\n\n```sh\nnpm install react-wizardry\n```\n\n```sh\nyarn add react-wizardry\n```\n\n## 🚀 Getting Started\n\nThe component takes a pages collection and renders the pages in a stepper interface.The pages appear in the order they are passed in the pages collection.\n\nThe example shows a simple wizard with two pages.\n\n```jsx\n\u003cWizard\n  pages={[\n    {\n      title: \"Introduction\",\n      fields: [\n        {\n          label: \"Name\",\n          name: \"name\",\n          type: \"text\",\n          isRequired: true,\n        },\n      ],\n  },\n  {\n    title: \"Contact\",\n    fields: [\n      {\n        label: \"Email\",\n        name: \"email\",\n        type: \"email\",\n        isRequired: true,\n      },\n    ],\n }\n},\n```\n\n## ⚙️ Properties\n\n| Name                          | Description                                                                                                                                                                                             | Default |\n| :---------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |\n| `bodyHeight`                  | Sets the height of the form body                                                                                                                                                                        | 500     |\n| `highlightFieldsOnValidation` | Highlights the fields when the validation fails or succeeds                                                                                                                                             | false   |\n| `onFinish`                    | Callback executed on final step                                                                                                                                                                         |         |\n| `pages`                       | Collection of [Page](#Page) object                                                                                                                                                                      |         |\n| `RTL`                         | Enables right to left mode                                                                                                                                                                              | false   |\n| `showStepperTitles`           | Use this prop to display page titles under the stepper points                                                                                                                                           | false   |\n| `silent`                      | Validation errors are flagged subtly. Validation messages are displayed only when the mouse is hovered over the field                                                                                   | false   |\n| `stepperItemWidth`            | Sets the width of each stepper item                                                                                                                                                                     | \"200px\" |\n| `strict`                      | Validation rules are applied to all inputs that have been marked for validation or that are required.\u003cbr\u003eThe component prevents the user from moving on until the current step's errors have been fixed | false   |\n| `theme`                       | [Theme](#🎨-theme) object for customized styling                                                                                                                                                         |         |\n\n## Page\n\nPage object is at the core of the wizard. Page object is used to define the title, description, fields, and validation rules for a page.\n\n| Name                   | Description                                                          | Type     |\n| :--------------------- | :------------------------------------------------------------------- | :------- |\n| fields                 | Fields of the Page                                                   | Array    |\n| finishMessage          | Custom message to be displayed on finish operation                   | String   |\n| globalFormErrorMessage | Global error message to be displayed on validation failures          | String   |\n| isActive               | Indicates whether the page is active or not                          | Boolean  |\n| onChange               | Callback executed when any of the Form field value changes(Internal) | Function |\n| state                  | State of the Page. can be `NOT_VALIDATED`, `SUCCESS`, `FAIL`,        | String   |\n| title                  | Title of the Page                                                    | String   |\n\n\u003e Every page is in the `NOT_VALIDATED` state by default.\n\nHere is an examples how to define pages in the wizard. We are defining two pages with two fields.\n\n```jsx\n\u003cWizard\n  pages={[\n    {\n      title: \"Introduction\",\n      fields: [\n        {\n          label: \"First Name\",\n          name: \"firstName\",\n          type: \"text\",\n          isRequired: true,\n        },\n        {\n          label: \"Last Name\",\n          name: \"lastName\",\n          type: \"text\",\n          isRequired: true,\n        },\n      ],\n  },\n  {\n    title: \"Contact\",\n    fields: [\n      {\n        label: \"Email\",\n        name: \"email\",\n        type: \"email\",\n        isRequired: true,\n      },\n      {\n        name: \"Phone number\",\n        label: \"Phone\",\n        type: \"phone\",\n        isRequired: true,\n      },\n    ],\n }\n},\n```\n\n## Form field\n\nForm field represents an input field in the wizard. Form field is used to define the label, type, validation rules, and other properties.\n\n| Name              | Description                                                 | Type      |\n| :---------------- | :---------------------------------------------------------- | :-------- |\n| isRequired        | Marks the field as required                                 | boolean   |\n| label             | Label for the field                                         | string    |\n| name              | Name of the Field                                           | string    |\n| selectOptions     | Use this prop when type is \"select\"                         | Array     |\n| type              | Type of Field                                               | InputType |\n| validate          | Enables validation for the field                            | boolean   |\n| validationMessage | Custom validation message to be shown on validation failure | boolean   |\n\n\u003e Fields marked as required are automatically validated. If you set `isRequired` to `false` and `validate` to `true`, the wizard will validate and flag the errors, but the step itself will not be marked as invalid.\n\nIn the example below we are defining two fields and making them required.\n\n```jsx\n\u003cWizard\n  pages={[\n    {\n      title: \"Introduction\",\n      fields: [\n        {\n          label: \"First Name\",\n          name: \"firstName\",\n          type: \"text\",\n          isRequired: true,\n        },\n        {\n          label: \"Last Name\",\n          name: \"lastName\",\n          type: \"text\",\n          validate: true,\n        },\n      ],\n  },\n]}\n```\n\nHere only the First Name field is required. The last name field will be validated if the user enters a value.\n\n## Form field types\n\nForm field supports the following types:\n\n- **text**: Text input field\n- **email**: Email input field\n- **phone**: Phone input field\n- **number**: Number input field\n- **password**: Password input field\n- **textarea**: Textarea input field\n- **select**: Select input field\n- **checkbox**: Checkbox input field\n- **radio**: Radio input field\n- **datetime**: DateTime input field\n- **file**: File input field\n\nAll the above input types comes with inbuilt validation.\n\n## Accessing the wizard data\n\nThe `onFinish` callback receives the wizard data with each key representing a page.\n\nFor the getting started example, the `onFinish` callback will receive an object with the following structure:\n\n```js\n{\n  \"introduction\": {\n    \"firstName\": \"\u003centered name\u003e\",\n    \"lastName\": \"\u003centered name\u003e\",\n  },\n  \"contact\": {\n    \"email\": \"\u003centered email id\u003e\";\n    \"phone\": \"\u003centered phone number\u003e\",\n  }\n}\n```\n\n## Custom validation messages\n\nValidation messages are enabled by default for all fields. However, the `validationMessage` property allows you to customize the message for each field.\n\n```jsx\n\u003cWizard\n  pages={[\n    {\n      title: \"Introduction\",\n      fields: [\n        {\n          label: \"First Name\",\n          name: \"firstName\",\n          type: \"text\",\n          isRequired: true,\n          validationMessage: \"Please enter your first name\",\n        },\n      ],\n  },\n]}\n```\n\n## Custom icons\n\nYou can change the icons on the stepper head by giving the `icons` prop an array of icons as react components.\n\n```jsx\n\u003cWizard\n  ...\n  icons={[\n    \u003cUser key=\"usr\" /\u003e,\n    \u003cBox key=\"box\" /\u003e,\n    \u003cTwitter key=\"twitter\" /\u003e,\n    \u003cDollar key=\"dollar\" /\u003e,\n  ]}\n/\u003e\n```\n\n## 🎨 Theme\n\nCustomize the look and feel of the Wizard through the `theme` object.\n\n\n| Name                | Description                                              | Data Type | Default |\n| :------------------ | :------------------------------------------------------- | :-------- | :------ |\n| background          | Background color of the wizard                           | string    | #f8f8f8 |\n| fail                | Colour to signify failed state                           | string    | #de1738 |\n| formFieldBackground | Background color of the Form field                       | string    | #ffffff |\n| formFieldBorder     | Border colour of the form field                          | string    | #dcdcdc |\n| inputBackground     | Background color of the native input control             | string    | #e8e8e8 |\n| inputTextColor      | Fore color of the text inside the native input control   | string    | #000000 |\n| primary             | Primary colour. This color will be the predominant color | string    | #007fff |\n| success             | Colour to signify a success state                        | string    | #1db954 |\n| tabColor            | Colour of the tab                                        | string    | #f8f8f8 |\n| tabLineColor        | Colour of the line that runs through all the tabs        | string    | #ccc    |\n| textColor           | Colour of all texts                                      | string    | #000000 |\n\nHere is a short example of how to use the theme object.\n\n```jsx\n\u003cWizard\n  theme={{\n    primary: \"#007fff\",\n    background: \"#000\",\n    textColor: \"#fff\",\n    formFieldBackground: \"#282828\",\n    formFieldBorder: \"#000\",\n    success: \"#519259\",\n    fail: \"#cf352e\",\n    inputBackground: \"#464646\",\n    inputTextColor: \"#fff\",\n    tabLineColor: \"#464646\",\n    tabColor: \"#7d7d7d\",\n  }}\n/\u003e\n```\n\n## CodeSandbox examples\n\n  1. [Basic Wizard](https://codesandbox.io/s/react-wizardy-simple-form-vu3y6b)\n  2. [Complex Wizard](https://codesandbox.io/s/react-wizardy-multi-forms-io9ey5)\n  3. [Wizard with custom theme](https://codesandbox.io/s/react-wizardy-theme-hzf5bx)\n  4. [Custom Icons](https://codesandbox.io/s/react-wizardy-custom-icons-d2rkin?file=/src/App.js)\n  5. [RTL](https://codesandbox.io/s/react-wizardy-rtl-misojt)\n  6. [Silent Mode](https://codesandbox.io/s/react-wizardy-silent-m4m3j8?file=/src/App.js)\n  7. [Display stepper titles](https://codesandbox.io/s/react-wizardy-stepper-title-2yhqx7?file=/src/App.js)\n\n## ⛏️ Built With\n\n- [React](http://reactjs.org) - A JavaScript library for building user interfaces.\n- [Typescript](https://www.typescriptlang.org) - TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.\n- [SCSS](https://sass-lang.com) - A CSS preprocessor and compiler.\n- [Webpack](https://webpack.js.org) - Webpack is a module bundler that packs multiple modules into a single file.\n- [Eslint](https://eslint.org) - ESLint is a linter for JavaScript and JSX.\n- [Prettier](https://prettier.io) - Prettier is a tool to format code.\n\n## ✍️ Authors\n\n- [@prabhuignoto](https://github.com/prabhuignoto) - Idea \u0026 Initial work\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprabhuignoto%2Freact-wizardry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprabhuignoto%2Freact-wizardry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprabhuignoto%2Freact-wizardry/lists"}