Triple Toggle

Triple Toggle is a 3-state toggle switch user interface component concept. The idea for a 3-state toggle switch surfaced when exploring ideas for ways to let the user easily change between a primary, secondary, and tertiary color picker in my upcoming app Noded. Originally, the goal of the color picker UI was to have a single color wheel selector visible with a single triple toggle component. This way the user could simply toggle the switch and reuse the same color wheel instead of having three seperate color wheel instances. Ultimately the triangular design didn't fit in this specific case and I didn't force it into the UI. The idea itself was still interesting so I designed and developed an interactive graphic prototype, which is seen below.

You can interact with the switch to see it in action. You'll notice there is a simple event dispatch (the label updates) when the state switch is complete. A developer can better abstract this out (this is just a prototype), but the idea is to provide a simple hook through which completed state changes allow successive code to execute. I often use production ready graphics for prototypes to get a better understanding of the full look and feel of a creation, and this is no exception. In addition I'm open sourcing this idea, the graphics, and the code so I believe a level of polish is appreciated.