Toggles have a problem: the state the toggle is in is the opposite of the action taken when the toggle is clicked.

E.G. if my toggle is on, it should display that it is on, but if I click the toggle, it should become off. So should the toggle visually indicate the state it is in ("on") or the action the user is taking ("off").

Is there a best practice for solving this dilemma?

marked as duplicate by Mayo, Dirk v B, Izhaki, Devin, JonW Dec 13 '16 at 9:45

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.


I think you're forgetting that labelling doesn't need to be inherent to the switch/toggle mechanism's shape and size and can, therefore, exist outside of the visual representation of the switch/toggle's mechanic.

And this is exactly how a light toggle/switch works.

ON < === OFF

You push the toggle towards the state you want.

Obviously the thing I've failed to show is that this is normally vertical. But consider this... if you put the labels outside the toggle mechanism, there's no chance of ambiguity, and the toggle is now a perfectly understandable switch/state mechanism.

Not the answer you're looking for? Browse other questions tagged or ask your own question.