4

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.

Improve this question
5
  • 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.
    – Ken Mohnkern
    Oct 14, 2016 at 13:03
  • Why not use a checkbox?
    – Kristiyan Lukanov
    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.
    – SNYDERHAUS
    Oct 17, 2016 at 14:06

2 Answers 2

Reset to default
16

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

enter image description here enter image description here

Improve this answer
5
  • I was just about to suggest using the 'focus' state but you beat me to it! ;)
    – Roux Martin
    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?
    – DocSalvager
    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.
    – Madalina Taina
    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?
    – DocSalvager
    Oct 16, 2016 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, 2016 at 10:48
1

enter image description here

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

Improve this answer
1
  • 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
    – SNYDERHAUS
    Oct 2, 2019 at 14:16

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.