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

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+

https://vaadin.com/docs/latest/components

470 stars 82 forks source link

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

Open web-padawan opened 1 year ago

web-padawan commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Avec112 commented 1 year ago

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 commented 1 year ago

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 commented 12 months ago

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