I'm trying to use the toggle to indicate the on and off state of a feature. One of the features will be turned on by default and cannot be turned off.

See below.

enter image description here

Feature 1 is turned on by default and cannot be turned off. Feature 2 and 3 can be turned on but are turned off by default.

What's the best way to show it? How about checkboxes?



I see two options, if you want to stick to the current color scheme the toggle provides some affordance to include a lock icon to signify it isn't able to toggle.

Provided you can change the colors I would make the actual on state pop more with a green color, then when disabled have it be a gray color.

enter image description here

  • I think I'll use this locked icon solution and perhaps combine it with the feedback from @Angelos Arnis Thanks!
    – Julia
    Sep 21 '15 at 14:22

You can check the link below: http://www.bootstrap-switch.org/examples.html

Basically you want an active switch or a read-only. Correct?

toggle and inactive toggle

  • Hi welcome to Ux.SE, can you try to pull relevant images or reasoning out of the link you provided (which I find helpful). If the link were to rot then future visits will not know how your answer helped. Thank you.
    – DasBeasto
    Sep 19 '15 at 0:13

I wouldn't do anything very different from the examples you showed, except that the slider for "Feature 1" could have a less-prominent border (it would be "greyed out," indicating that it is disabled) and should do nothing at all on hover. The sliders for "Feature 2" and "Feature 3" are fine just as they are, but a hover effect that indicates that they are "live" would invite interaction.


Simply, don't go for the toggle. The inactive state should be communicated through the label. If the label is grayed out, it doesn't matter any more what state the toggle is in.

Toggle = user-input Label = communication

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