Idioms for a three-state toggle?

Question

I have a table column where each row has one of three states, and the purpose of the row is to offer manipulation AND display of this property with three states.

My current development view is to have three tightly packed radio buttons with labels at the head of the columns (and every 50 rows or so) and onClick they send an AJAX request and thar she blows.

This is fugly.

Is there a standard idiom for a control like this? I'm currently mocking up something similar to the iPhone on/off toggle, but with a "middle" state.

Any input would be welcome.

EDIT

A bit more clarification: I have a tool for confirming events. Each event is either "proposed", "cancelled", or "confirmed". They all default to "proposed" until someone explicitly confirms or cancels them. This is a thin front-end for a SQL table.

Answer 1

As an alternative to you radio buttons, you could consider a drop-down list with three options. The disadvantage is, of course, that two clicks are needed to change the value.

Answer 2

Maybe use a slider with three states? (It really depends on the exact situation!)

Answer 3

Perhaps display arrows on either side to change the state:

(Cancelled)  <| Proposed  |> (Confirmed)

These may or may not 'wrap' depending on how well that suits the values and how important it is to saving a click when transitioning from value 1 to value 3 (or vice-versa).

Answer 4

The standard mechanization for things like this in military avionics, where screen space is always at a premium,and so are buttons, is a "rotary". Each time you click it, it steps to the next value in sequence, wrapping around.

As an example, a device with a cryogenic cooler might have three states: OFF, WARM, and COOL. Initially, the device is OFF: no power applied. Click it, and it switches to WARM, meaning power is applied, but no cooling. Click it again, and it starts the cooler. (Since cooling in this kind of thing is usually supplied by a gas bottle with a strictly limited capacity, you don't want to cool the device until you are getting ready to party.) Click it again, and it shuts the device OFF.

Answer 5

Consider a fixed-position slider with three positions, such as offered by jQueryUI: http://jqueryui.com/demos/slider/#steps

Answer 6

I am reminded of the permissions button in SQL - it has multiple states; green check, red x, no setting, and clicking on them cycles through the three states. Its ok but annoying if you want to change a bunch to the state reached second, and if you click too many times you have to go through it all again. Left click - cycle forward; right click - cycle backward might work but certainly has no basis in UI expectations.

Idiomatically, I would say a Stop Light (red/yellow/green). They could behave like radio buttons; darker toned for 'off' and lighter tones for 'on', and since the color gives a cue you can move the description to a mouseover label. Of course, it isn't RG Colorblind kosher, so depending on your application that may be a deal breaker. (also, it may be confusing on Mac where the minimize/close etc buttons are the same color scheme).

Answer 7

You could also do this with buttons or hyperlinks. In a big table, hyperlinks will probably look best.

In the Proposed state, your cell could look something like this (with underlined links, but the editor won't let me):

Proposed Confirm Cancel

In the Confirmed state:

Confirmed Undo

In the Cancelled state:

Cancelled Undo

This will take two clicks to get from Confirmed to Cancelled and vice versa, but I assume that this operation is rarer than switching between Proposed and one of the other two.

Answer 8

I've seen this handled with image buttons that remain "depressed" when you click while popping the other two out. They act like radio buttons except that the label and the state are merged. If your names are too lengthy to fit in a button, you can abbreviate them and provide a key. I'd also give each one a distinct color. For implementation just pop the value in a hidden form field on click.

These are called "Toggle Buttons" in some other UI's:

• http://java.sun.com/products/jlf/ed2/book/HIG.Controls2.html
• http://msdn.microsoft.com/en-us/library/dd940509%28VS.85%29.aspx
• http://developer.gnome.org/projects/gup/hig/2.0/controls-toggle-buttons.html

Answer 9

Why not use three boxes that look like the "Questions", "Tags", "Users", ... boxes on this page (could be implemented as links, buttons or whatever)?