{"repo":"adamculpepper/toggle-switchy","free":true,"listed":false,"github":"https://github.com/adamculpepper/toggle-switchy","clone":"git clone https://github.com/adamculpepper/toggle-switchy.git","description":"CSS toggle switch for checkbox inputs. No JavaScript, no dependencies, one stylesheet under 8KB. Five sizes, seven colors, rounded or square, optional ON/OFF text, labels left or right. Keyboard accessible with visible focus styles, and every selector is scoped so it will not touch the rest of your CSS.","language":"CSS","stars":46,"topics":["css","css-only","pure-css","toggle-switch","toggle-controls","hacktoberfest","accessibility","checkbox","css3","frontend"],"license":"MIT","category":"ui-components","readme_excerpt":"Toggle Switchy A CSS toggle switch for checkbox inputs. No JavaScript, no dependencies, one stylesheet. Try the live demo --- Toggle switches are one of those components that keep getting rebuilt. The usual options are a framework you have to adopt for one control, a snippet that ships a pile of global styles, or a JavaScript widget that replaces the checkbox with a div and loses the form behavior you wanted. This is one stylesheet. Link it, put a class on a label, and the checkbox inside it becomes a switch. The input stays a real . It posts with the form and behaves like a checkbox for anyone using a keyboard or a screen reader, because that is what it still is. What you get - Five sizes, from extra small to extra large - Seven colors, or your own by overriding two lines - Rounded, square, or the default lightly rounded corners - ON and OFF text built in, or switched off for a plain slider - Labels on the left or the right - Disabled and checked states, driven by the normal HTML attributes - Focus styles, so keyboard users can see where they are - No global styles. All 88 selectors are scoped under .toggle-switchy Install Download toggle-switchy.css and link it: Or use the CDN: Then write a label with a checkbox inside it: With a text label beside the switch: The for attribute and the input id have to match, which is what makes the whole label clickable. Options Every option is a data attribute on the label. Option Attribute ------ ------ Size data-size=\"xl\" data-size=\"lg\" ","default_branch":null,"files":null,"tree":[],"storefront":"/r/adamculpepper","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/adamculpepper/toggle-switchy/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}