Search code examples
cssusabilitytogglebutton

How do you display items which can toggle (UI)


Say I have some state which the user can toggle, for example [ON] | [OFF] .

Typically, I use ONE switch (BUTTON) and when the thing is ON, the user sees:

LIGHT IS [ON]

When it is OFF they see

LIGHT IS [OFF]

My question is: is it obvious (sensible) that one should click [ON] to turn the light [OFF]?

How do you do it? Any thoughts or ideas appreciated.


Solution

  • I would use a label and an button to show the action.

    Light is On - Switch Off?

    Clicking that would change both the label and the button to:

    Light is Off - Switch On?

    This solution clearly states the status and the action available.