toggle button

In a toggle button like above, where should a user click to change the status?

It seems that the standard in most applications is to click on the slide itself. This would make sense as a user can relate this behaviour to a physical switch for which you have to manipulate the actual slide to the other side.

On the other hand, it seems counter-intuitive to me, that in order to turn the switch off, you'd have to click on 'on'.

What is best practice?

Another solution that I can think of would be to make the entire button clickable: Would it be advisable that users can click on either side of the bar, and either one of those clicks will move the switch to the opposite state?

  • The user should either click the "off" to turn it "off" or preferably, since it is a single control, the user should be able to click anywhere. – Evil Closet Monkey Feb 26 '14 at 18:25
  • you should also consider avoiding this, it affords a rather awkward click, hold and slide motion. At least make sure the response is immediate on mouse button down so someone who clicks intending to slide gets some immedaitely feedback and doesn't complete their intended action – Toni Leigh Feb 26 '14 at 19:13

Don't think about it as tapping on the ON part or OFF part of the switch, think of it as one single switch. Since it is a toggle, tapping or clicking on any part of the toggle switch should change the status. The important thing here is to clearly display the current state using word or color so user will know, at a glance, the state of the setting.

Example from Android:

enter image description here

Example from iOS:

enter image description here enter image description here

| improve this answer | |

There are actually 2 different buttons that often are thought of as the same - the Light Switch button and the Toggle button. The Light Switch is, as it sounds like, a button that you press where ever to change state of. This is a good idea to use when you have 2 states (on/off, yes/no etc). The toggle has the same effect as two radio buttons and can sometimes be more confusing (since the users sees both options). This technique is none the less the de facto standard when it comes to multiple single choices and can be used for two options if used correctly.

See this link for a little deeper explantation:


| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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