Is required validation possible on a switch/toggle control?

Question

Scenario

I want to make sure a user has made a selection on a switch input.

On page load it is either on (1 - in image) or off (2 - in image) depending on what state it is set to in the code.

---

Problems

1. On submit the input is read as either being on or off (never unselected)
2. Visually it is not obvious whether the current selection is made by the user or the default state on page load

---

Solution

To get around the two issues mentioned above, I could change the switch to a couple of radio buttons (3 - in image) That way required validation will fire and also you can visually see no selection has been made by a user.

---

Alternative Solution?

However, I would like to hear any ideas about solving the two problems mentioned but still retaining the switch control. Is it even possible?

---

Answer 1

You could try making the toggle start in the center of the switch. Then once the user starts interacting with it it toggles only to the on/off states, the centered position is just the default "unset" state.

I imagine this would be a bit confusing to users on first glance though so a radio button would probably be more intuitive for required fields.

(obviously you could play with the styling)

Answer 2

I encountered something very similar. Our solution was to hide the radio button options with an EDIT link and add a SAVE button for validation, then re-hide. Worked for our situation.

Answer 3

You could use an indeterminate toggle switch, see Bootstrap Switch or Flip Toggle Switch for examples on how to do this. Then you just append the event to fire validation.

As for styling, you'll notice in the examples above they use the closure principle of gestalt to communicate there's a state that needs user to complete it to avoid uncertainty. So, in your case, you'd need something like this:

by the above mentioned principle of closure, user will try to complete one of the actions to comply with this closure principle. This is called Multi-stability

Multi-stability is the tendency of ambiguous perceptual experiences to move unstably back and forth between alternative interpretations. Some objects can be perceived in more than one way. You can’t see both at once. Instead you bounce back and forth quickly between the two stable alternatives. One will tend to be your dominant perception and the longer you go without begin able to see the other, the harder it will be to see that other perception. From a design perspective if you want to change someone’s perception, don’t try to change it all at once. Find a way to get them to see an alternative. Then work to strengthen that alternative view, while weakening the original.

Answer 4

1. No toggle at first; this instead: “Please provide gender.”
2. User clicks, sees this: “[x ] Male”
3. User makes a choice: “[ o] Female”

Like that?