Simple toggle switch using html, pure css
For further actions, you may consider blocking this person and/or reporting abuse
Read next
Understanding React Fiber: Enhancing Performance and User Experience in React
Abhay Singh Kathayat -
React libraries for building forms and surveys
Megan Lee -
What React Brought Us in 2024: Key Updates and Innovations
Iri Denis -
The Three Golden Rules of Successful Product Development
Shrijith Venkatramana -
Top comments (8)
Sad that the original CodePen this was inspired from is marked as A11y as it certainly is not accessible (and neither is your version I am afraid because of that).
Not too hard to fix though, instead of hiding the checkbox you need to use a visually hidden class so the checkbox is focusable but not visible.
You then need to add focus indicators to the slider span when the checkbox is focused.
Finally you should ensure there is some text within the label (although as this is a demo that one is just an FYI) so people using a screen reader know what the control is for!
With those three things you should be all set, but please don't use this in production as it is.
Many thanks, very good points!
Quite nice, and also, as chance would have it, I just built a similar toggle a few hours ago for a small web-application :D
That is great! Good job!
Quite a pleasing toggle!
Thanks Keff :D
Nice toggle!
Thank you Gustavo =)