Trying to determine a way to represent a "tabbed" state on a switch that looks like this:

enter image description here

Under the hood, it is just a checkbox that the user can tab-over and press enter to check/uncheck the box.

What is a way that I can represent the active tabbed state on the switch specifically?

I have tried to add an outline/box-shadow, but I am using material design guidelines and don't think this works with the clean-cut active states on text inputs etc.

  • 1
    edited your title because it's being flagged as primarily opinion based – Devin Oct 7 '16 at 16:32
  • What exactly do you mean by "tabbed" state? How does that differ from simply the state of the switch? – JohnGB Oct 11 '16 at 10:50
  • Why doesn't the switch you're showing work? I'm having trouble understanding what you're looking for. – Ken Mohnkern Oct 14 '16 at 13:03
  • Why not use a checkbox? – Kristiyan Lukanov Oct 16 '16 at 13:05
  • The issue was that I didn't know how to represent a tabbed/focused state for a switch. The answer selected has provided use for this instance following material guidelines. – Bryce Snyder Oct 17 '16 at 14:06
up vote 16 down vote accepted

Just use the style is recommended on Material design | Components– Selection controls | Switch

enter image description here enter image description here

  • I was just about to suggest using the 'focus' state but you beat me to it! ;) – Andrew Martin Oct 7 '16 at 15:13
  • 1
    Refering to the 2nd image... what does it look like on and off not hovered and not focused? How does the user know that a focused (by tabbing with keyboard) image has been pressed? – DocSalvager Oct 16 '16 at 10:20
  • 1
    @DocSalvager Good question. According to Material design | Components– Selection controls | Switch (link in the answer), the first image is for the normal state. In the image with the light background, the shadow is visible. I noticed for the radio buttons, it is the same design for hover and normal state. – Madalina Taina Oct 16 '16 at 10:33
  • 1
    Forms frequently have buttons close together. With no change between normal and hover, how does the user know they are focused on the right one? Which brings me to... Why are hover and focus different? To hover is to focus. Confused? – DocSalvager Oct 16 '16 at 10:40
  • 1
    @DocSalvager A difference will be the cursor on hover, so I'm sure the user will know. – Madalina Taina Oct 16 '16 at 10:48

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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