0

We're using an iOS-style on/off switch to toggle selected items on/off. This switch will also reflect the state of the selected items. If you select items that are on, the switch will show on. Select items that are off, the switch will show off.

The issue comes if you select some items that are on and others that are off. For that, I need a version of the switch in some middle position. (Like a checkbox with a dash through it.)

Has anyone seen a version of that kind of switch that includes a middle position? Do any of you have any recommendations regarding my approach?

Improve this question
5
  • Can you illustrate what you mean? Is the switch interactive? For example what happened when you select 3 mixed on/off items and you hit the switch? Or is it just an indicator of state (Ie not clickable)
    – tohster
    Apr 3, 2015 at 18:45
  • The switch is both interactive and an indicator of state. Selecting mixed-state items and hitting the switch turns them on, much like in Microsoft Word if you select bold and plan text and hit the Bold button.
    – Paul Seymour
    Apr 3, 2015 at 19:01
  • 1
    Another example is in Adobe products. Select 2 objects of the same fill color, and the swatch color shows that color. Select items of a different color, and the swatch turns into a "?" symbol.
    – user64294
    Apr 3, 2015 at 19:32
  • A related question that I asked earlier that might also give you some ideas: ux.stackexchange.com/questions/75399/…
    – Michael Lai ♦
    Apr 4, 2015 at 8:53
  • I don't know about iOS but in .NET WPF you can set a CheckBox to IsThreeState = true for a third state. True, False, and Null.
    – paparazzo
    Apr 6, 2015 at 12:45

3 Answers 3

Reset to default
2

You may wish to investigate if an iOS-style on/off switch is the most appropriate metaphor for your situation.

A checkbox is a very traditional control which users are familiar with and has a very clear "on" and "off" state. They also overcome the common issue of if a switch should show state, or action when pressed, since their behavior is already well known. They also have familiar 3-state patterns:

enter image description here

enter image description here

If an iOS-style switch is the design of choice, you can try something akin to the following:

enter image description here

The on and off states are clearly indicated (my use of color is not a suggestion, it is simply an illustration) and the middle state is one of indifference to either state.

Improve this answer
2
1

I think what you're looking for is a segmented controller. The switch is used for binary options where as the segmented controller allows for 3 (or more) mutually exclusive options. Hacking the switch design to accommodate for a third state isn't recommended since it it's not clear there's a middle state. It also requires you to slide to just the right position (esp for the middle state) and can accidentally slide to the next state by accident if the thresholds are too close.

segmented controller

Improve this answer
2
  • 1
    Not in this case. The control the OP is seeking a 2-state control, with an "indeterminate" state for when multiple dissimilar records are selected. The segmented control would imply that the "indeterminate" state is a valid selection, which it is not.
    – Nicholas Pappas
    Apr 3, 2015 at 21:46
  • Yep. The reason why a segmented controller won't work in this case is because there is no 3rd state that the user can choose. There are only 2 states. The switch just needs to show a state where buttons belonging to both states are selected.
    – Paul Seymour
    Apr 6, 2015 at 16:40
0

First, it seems as though you're using the toggle for the wrong purposes.

With that being said, if you are set on using it, you can create a grey version with a dotted or dashed outline of the toggle/switch centered.

Something like this (quick sketch):

Mixed State Toggle

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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