Repository navigation
Create design for switch/toggle Vaadin alternative #2555
Description
Description
The new Vaadin components library does not have a boolean toggle that we can re-use.
We need an alternative to <or-mwc-input type="switch">, where the meta item asOnOff: true is configured.
However, since it needs to align with our new Vaadin design system, we could use a design for this.
When creating this design, we should take several things into count:
-
Do we need a toggle / switch in the first place? If Vaadin does not have it, should we?
-
If we decide on a "custom toggle/switch", we should think about the development time it takes.
We could potentially use a modified version of the checkbox component, or reuse tools available on the internet (like we did with Vaadin) that could potentially help out.
Switch / toggle in Manager UI (v1.18.0)
The current switch is built using Material UI, see their documentation.
It's an alternative to showing a checkbox, where this toggle often represents turning something on and off.
Activity
[-]Create design for toggle Vaadin alternative[/-][+]Create design for switch/toggle Vaadin alternative[/+]remyberden commentedon Feb 27, 2026
Functionally a checkbox and toggle are the same. But in UX, a general rule is that a checkbox is used when the user is required to actively save settings. So for instance, in the modify asset page it can be part of the settings in the attribute list. the action will take effect after saving the changes.
A toggle means immediate action/save. So the toggle component would make sense in the view asset page when toggling between modes. I haven't really found a good reason why Vaadin does not include a toggle button, but I think in our case, we definitely need one.
I did find this add-on: https://vaadin.com/directory/component/togglebutton-for-flow Is this something we can use?
MartinaeyNL commentedon Feb 27, 2026
No unfortunately not.
It is exclusive to the Java implementation of Vaadin (called Flow), and not the web-only implementation that we're using.
Along with that, the code of that addon hasn't been updated for years, nor is the code interesting for us to copy/paste.
I think it makes sense to either restyle the Vaadin checkbox or the HTML default checkbox to a "Toggle switch".
I'll need to do research on what the best solution is, and whether the accessibility will be an issue.
remyberden commentedon Mar 5, 2026
I've added the toggle component to OR Design System on Figma.
MartinaeyNL commentedon Mar 10, 2026
I'll take a look at what the estimated development time would be to create a "custom toggle switch".
From there, I'll create a separate issue so I can pick it up in an upcoming sprint.
MartinaeyNL commentedon Mar 12, 2026
(removed this comment, as it was meant for a different issue)
MartinaeyNL commentedon Mar 20, 2026
The design seems OK and simple enough to integrate solely by using CSS.
There are plenty of examples online, and I don't expect too much technical headaches maintaining it.
Created #2637 for the implementation phase 👍