Demos

📄️ Small Step Size

` You can change the step size by passing the stepSize prop to the FormWizard component. `

📄️ Square Steps

Square Steps is a component that allows you to create a form with square steps.

📄️ Font Awesome Icon

You can use any icon from Font Awesome in the icon prop of the TabContent component.

📄️ Custom Title and Subtitle

You can customize the title and subtitle of the form wizard by passing the title and subtitle props to the FormWizard component.

📄️ Custom Title Template

You can customize the title and subtitle of the form wizard by passing a function to the title prop. The function should return a JSX or TSX element.

📄️ Start Step Index

This is a demo of the startIndex component.

You can validate the tabs by adding the isValid prop to the TabContent component. The isValid prop accepts a boolean value. If the value is true, the tab will be validated. If the value is false, the tab will not be validated.

📄️ Custom Footer Buttons

You can add custom buttons to the footer of the form wizard. This is useful if you want to add a custom button to the footer of the form wizard.

📄️ Custom Icon

You can pass custom icons to the tabs. You can pass any valid react component as icon. You can pass SVG, img, or any other react component as icon.

📄️ Inline Step 🆕

You can show the step (tab) inline by passing the inlineStep prop to the FormWizard component.

📄️ Dark mode 🆕

You can customize the dark mode of the form wizard by passing the darkMode prop to the FormWizard component.

📄️ Tab without Background 🆕

You must set removeBackgroundTabColor transparent of the tab background color.

📄️ Show error on tab 🆕

You can show an error on the tab by passing the showErrorOnTab prop to the FormWizard.TabContent component.

📄️ Simple