rajasegar / css-toggle-component

Pure CSS Toggle Buttons as a Web component

Pure CSS Toggle Web component

Pure CSS Toggle Buttons - ON-OFF Switches

• 16 different style effects to choose from
• Keyboard Accessible (You can able to toggle using Space keys)
• Screenreader discoverability

Install

npm install css-toggle-component

Demo

https://rajasegar.github.io/css-toggle-component

Usage

<css-toggle theme="slide"></css-toggle>
<css-toggle theme="move"></css-toggle>
<css-toggle on-label="YES" off-label="NO"></css-toggle>

Themes

Pass on any one of the following values for different toggle effects to theme property.

• slide
• move
• updown
• flip
• rotate
• fadeout
• slideall
• rect-slide
• rect-flip
• rect-move
• rect-hide
• rect-updown
• rect-zoomin
• rect-slide2
• rect-slide3
• rect-slide4

Things to do

• Bring focus to the component when using Tab keys for navigation
• Provide option to pass on aria-label
• Tests
• Refactoring and code cleanup
• And much more...

Credits

https://codepen.io/himalayasingh/pen/EdVzNL?editors=1000

A Pen by Himalaya Singh