Error
We are unable to use the current Toggle control in any user-facing functions or pages because untrained users can't look at it and tell which state it's in. Most of our users assume the "lit up" indicator is the active state when in fact the darkened indicator is active. There's nothing inherent in the control to clarify which color represents on and which color represents off.
The most reliable work-around is to right-click on the button, inspect the element, and look for which button in the compound control is currently tagged with the "active" class. That's obviously not a solution for our end users.
Best-practice toggles typically use a graphical metaphor to clarify state.
Another viable approach that retains the basic style of the current toggle is to use three colors: a neutral color for the deselected state of both options, a first active color for the active state of the first option, and a second (distinct) active color for the active state of the second option. By repeatedly toggling the button, the user can quickly learn to identify which color represents the deselected state.
The most common use case for this is to display the value of Boolean attributes. As is, we typically have to use a drop-down for these attributes. It works, but it's an unfriendly user experience. The Checkbox option serves in some cases but not others. The other work-around is to create the attribute as a single-select with two radio buttons, but this requires a translation step to convert the radio button selection to a Boolean attribute.
Cultivate your ideas for maximum impact with these helpful submission tips that will increase the chances of your brilliant concepts becoming reality.