This pattern describes a user interface component to select one out of two possible values.

Context

The user wants to change the status of something, e.g., turn audible signals on or off.

Forces

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.

Solution

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.

Usability impact

Using this pattern allows a clear display of the current status together with a clear indication of the status selection control.

Safety impact

The flip-flop button can be used to protect other, safety-relevant controls.