tri-state switch

[123niel]

It would be greate to have some sort of tri-state switch or toggle in onyx. Sometimes a simple boolean just isn't enough.

[mj-hof]

Hi Niel. Thank you very much for your input :). Could you describe your idea in more detail? Maybe you have an example of a use case/screenshot or something else for reference?

[123niel]

Sure, in my view a tri-state switch has multiple use cases.
One example would be a filter form to filter entities that have multiple boolean properties. With tri-state switches you can enable user to set the filter to three values:

1. neutral: ignore this property
2. positive: only show entites where the property is true
3. negative: only show entities where the property is false

For our current Core UI applications we solved this with a dropdown select but I think something like a tri-state toggle would be more intuitive.

I have found some example implementations here: https://stackoverflow.com/questions/23661970/3-state-css-toggle-switch. I also took this screenshot from there:

An intresting alternative might also be mutual exclusive toggle buttons like discussed here: https://ux.stackexchange.com/questions/80728/are-two-toggle-buttons-better-than-a-tri-state-switch

[JoCa96]

IMHO, the toggle button is the better approach, as a switch conveys the idea of a two-state input.

[larsrickert]

I like the idea of a tri-state switch. Another use case could also be a dark mode toggle where you can toggle between light, dark and automatic

[mj-hof]

@jannick-ux Please have a look at this

[jannick-ux]

Hi Niel,
thanks for your input. We are still working on the basic component set for onyx and therefore there is a lot of thinks to come up in the future. In general we really like the overall functionality, and we already thought about similar things, but we have do do a clean conception and ux-testing to all the dependencies here first.
So we created a ticket to do a poc here. With this ticket, you can follow the status of your request.

Thank you