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, 2016 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, 2016 at 10:50
  • Why doesn't the switch you're showing work? I'm having trouble understanding what you're looking for. Oct 14, 2016 at 13:03
  • Why not use a checkbox? Oct 16, 2016 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. Oct 17, 2016 at 14:06

2 Answers 2


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! ;) Oct 7, 2016 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? Oct 16, 2016 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. Oct 16, 2016 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? Oct 16, 2016 at 10:40
  • 1
    @DocSalvager A difference will be the cursor on hover, so I'm sure the user will know. Oct 16, 2016 at 10:48

enter image description here

many browsers, if not all have a built-in focus state. I am using that.

  • Does the square focus state provide a better representation that something that was showing a shadow or highlight along the actual toggle? Like the material designs Oct 2, 2019 at 14:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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