This pattern describes a user interface component to select one out of two possible values.
The user wants to change the status of something, e.g., turn audible signals on or off.
The difficulty here is to properly assign the currently active state of the flip-flop button to the setting it controls. It must be clear to which state the setting changes when the button is pressed.
There are two solutions, one for resistive touch screens and one for touch screens based on capacitive technology.
Interactive Example — Capacitive
The first example shows a solution for capacitive touch technology where drag and drop operations are possible.
Drag the slider to change states.
Interactive Example — Resistive
The second example shows how to avoid drag and drop for resistive touch technology.
Click the control to change states.
Using this pattern allows a clear display of the current status together with a clear indication of the status selection control.
The flip-flop button can be used to protect other, safety-relevant controls.Show all articles