Add a Steppper component

[Zerotask]

I'd suggest to add a Stepper component, similar to the component of MDB.
Steppers provide a convenient way of breaking a complex form down to smaller steps.
Benefits:

• Smaller space required (since it uses a collapse-like style)
• Easier to read (since you always just see a part of the whole)

Example:
You have a registration which requires you to fill out a form of 16 input fields which can be overwhelming for a user.
With a stepper you could create 4 steps and group it logically, e. g. contact data, interests etc.

URL: https://mdbootstrap.com/docs/jquery/components/stepper/

Example Screenshots taken from the MDB component page

---

---

---

There is also a similar component in Semantic UI: https://semantic-ui.com/elements/step.html

---

[mdo]

This seems more well suited for an example than a new full component.

[Zerotask]

Are there any criteria to get counted as a "full component"?
For example the component breadcrumb has way less content to offer than this feature suggestion.

If you look at the MDB component page you see working examples with different variations.

[herbalite]

I've used a stepper with a simple jQuery plugin ( the pages were separated by a fieldset element )

Later as that particular website migrated, I had to make a Bootstrap 4 usable component. Besides the responsive issues (dropping the fieldset requirement amongst other things), there was the need for page by page validation, which required hooks. There was also the need for adding or removing steps dynamically, which required quite some messing with the core code plugin, and more hooks. Then there were async callbacks needed that required form validation too, and disabling and enabling components, which meant more hooks.

While still in use, I think that stepper component of my own has too many hooks to get hooked ( pardon the pun ).

Having just a barebone stepper, would be quite limiting in userland, as I found out, when the demand came to add more responsive stuff to my version.

So a stepper can be done, but I would not recommend it to include it as core component into Bootstrap, as it requires much more JS than we see for the average Bootstrap component.

Just my 2 cents.

[XhmikosR]

@Johann-S has a stepper plugin you can use https://github.com/Johann-S/bs-stepper

[ffoodd]

I also made one in Boosted —scss sources— however it's only horizontal ATM.

[mdo]

Are there any criteria to get counted as a "full component"?
For example the component breadcrumb has way less content to offer than this feature suggestion.

Very fair question. Don't have an answer just yet, but thanks for asking that. Maybe we can do more here. Thoughts @ffoodd on including this in the core? Or having an example with @Johann-S's project?

[ffoodd]

I guess @Johann-S stepper is closer from what's being asked. Maybe could we add an integration example, at least?

To add something to our core, I think it should be requested several times. This is the only way to not completely bloat the output, and ensure a component would be helpful.

Did we have other requests for this kind of things?

[XhmikosR]

After the recent changes and depending if we drop Legacy Edge support, I think we'll have room for new components. Remember we have the #29017 that should land at some point (I need to rebase it probably).

[leandroruel]

to be honest, this component could be very useful for me, i just don't open issues requesting it because i'm always afraid of someone close it and say: 'no' lol

BS is a CSS framework but, why not add more JS based components?

bootstrap can start making components as separate from the core and plugable through npm.

eg: @bootstrap/stepper, @bootstrap/carousel

[XhmikosR]

We don't plan to split the packages at this point. Maybe things will be better eventually and we'll get to do it. I'm in favor but I don't want to have to use yarn.

Back to the point, TBH you are the only one who expressed this request AFAICT. @Johann-S could look into it, assuming everyone agrees with adding said component, he has time and we check how much it adds to the project.

[Johann-S]

BTW I'm not against merging my stepper in Bootstrap core components

[XhmikosR]

We could at least mention bs-stepper in our docs, assuming it works with v5.

@mdo: your call about adding bs-stepper in core. Not sure how much it will increase our size. I see some use cases for sure, but it seems this is the first time it was requested.