Create vaadin-stepper (wizard) web component for complex forms

[web-padawan]

Describe your motivation

Currently, we are lacking a component for building complex forms with multitple steps, known as "stepper" or "funnel".
We abuse vaadin-accordion for that in this example and there now is an issue to simplify it, as it isn't quite a good fit.

Describe the solution you'd like

Create a vaadin-stepper web component for building form UIs like this one:

The screenshot is from a Polymer / Angular based SaaS product built by @OWOX where I worked before joining Vaadin.
You can see it in action at https://bi.owox.com - just start a trial and then choose "Import data" to create a pipeline.

Additional context

Reference examples:

• MUI React Stepper: https://mui.com/material-ui/react-stepper/
• Vaadin 14 add-on: https://github.com/mLottmann/VStepper

[knoobie]

Another really popular word for it is "Wizard" - there you can find even more add-ons https://vaadin.com/directory/component/wizards-for-vaadin

[web-padawan]

@knoobie Sorry, I got overwhelmed with notifications and missed your comment somehow. Renamed the issue.

[Avec112]

I will like to add timeu-wizard in addition to the mentioned ones. It seems to have been popular over time and several forks exist for Vaadin v14 and later while the main usage seem to have been with Vaadin v8 and older. We will need some kind of Wizard in the time forward and very much hope for a official supported component.

[juuso-vaadin]

The dots and lines is the most common style for steppers, but not the only option. Personally I'm a big fan of the stepper in the french government's design system: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/indicateur-d-etapes

Benefit is that it more easily scales to any number of items, while horizontal dots require extra effort to handle overflowing.
It is also more suitable as a header element of a page compared to steppers.

Downsides are that it doesn't disclose as much info about the whole sequence and moving between steps has to be done outside of the component.

[rolfsmeds]

Some wizard-dialog designs from sweap.io (Vaadin app):