[SOLVED] Looking for a kind of ON/OFF switch Inputfield for my GroupMailer module

[Gadgetto]

Nice addition with the :focus! I personally do like the 2nd one most! Its clean and flat and snappy!

Your 2nd CodePen link doesn't show the same version as in the ani.gif: https://codepen.io/baumrock/pen/zeVErm (it has a shadow)

Do you have a working version of the second one?

 

[bernhard]

No, I've accidently overwritten this version. But the second version is not accessible via keyboard anyhow. 

Damn... and I did it again! Now the pen https://codepen.io/baumrock/pen/pGXWxO has no shadow any more. It's the same as the second version but with grey border on focus to see it both on checked and unchecked state.

Does codepen not save different versions like jsfiddle does when saving??

[Gadgetto]

27 minutes ago, bernhard said:

No, I've accidently overwritten this version. But the second version is not accessible via keyboard anyhow. 

Damn... and I did it again! Now the pen https://codepen.io/baumrock/pen/pGXWxO has no shadow any more. It's the same as the second version but with grey border on focus to see it both on checked and unchecked state.

Does codepen not save different versions like jsfiddle does when saving??

Doesn't work when implemented in my module: 

[Gadgetto]

How about this one:

[bernhard]

I like the grey background, but I'd prefer a dark grey border instead of the green one. In your case when the checkbox is checked it looks as if the button gets smaller because you use the background color as border color. That's also a little worse for accessibility than a dark grey I think.

[Gadgetto]

This version fits more into UIkit admin theme:

(I could think of a simple theme detection and use colors based on selected theme)

[ukyo]

@Gadgetto I have a module but didn't add it to module directory https://github.com/trk/FieldtypeToggle Module using : https://github.com/victornpb/vt-toggle Module only works with checkbox, will add support for radio, checkbox group and radio group. You can try it or you can continue with your solution.

[Gadgetto]

@ukyo thank you, I’ll have a look at your module. I just thought about creating a checkbox toggle module for myself.