HTML HTML HTML

A pure CSS toggle switch for form input checkboxes

Overview

Toggle Switchy

Maintained Size Stars Issues License

A pure CSS toggle switch for form input checkboxes

Preview

Installation

CSS

<link rel="stylesheet" href="toggle-switchy.css">

HTML

<label for="ID_HERE" class="toggle-switchy">
	<input checked type="checkbox" id="ID_HERE">
	<span class="toggle">
		<span class="switch"></span>
	</span>
</label>

Options

Option Data Attribute
Rounded data-style="rounded"
Square data-style="square"
No Text data-text="false"
Disabled add the disabled attribute to the input tag
Checked add the checked attribute to the input tag
Sizes data-size="xl"
data-size="lg"
medium (default)
data-size="sm"
data-size="xs"
Colors data-color="red"
data-color="orange"
data-color="yellow"
data-color="green"
data-color="blue"
data-color="purple"
data-color="gray"
Labels data-label="left"
label on right (default)

Features

  • CSS only - no JavaScript!
  • No dependencies
  • Fully reponsive
  • Fully customizable
  • Fully self contained
  • 7 color schemes
  • Labels on the left and the right
  • Keyboard Accessible - accessibility (a11y)
  • Focus Styles - accessibility (a11y)
  • Supports all modern browsers
  • Search engine friendly
  • Screen reader friendly
  • Doesn't dump a bunch of global styles that'll screw with your other CSS

TODO

  • Add in error checking to make sure the input element is a checkbox - input[type='checkbox']
  • Better a11y (accessibility) support
  • Add tabindex="0" to the demo for keyboard accessibility instructions

Known Issues

  • IE10 and below doesn't support the smooth slide

See also Toggle Radios - A CSS only toggle switch for form input checkboxes (not Bootstrap dependent)

You might also like...

iOS 7 style switches for your checkboxes

iOS 7 style switches for your checkboxes

Description Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simp

Dec 31, 2022

Highly customizable checkboxes and radio buttons (jQuery & Zepto)

iCheck plugin 1.0.3 Highly customizable checkboxes and radio buttons for jQuery and Zepto. Refer to the iCheck website for examples. Note: iCheck v2.0

Dec 25, 2022

A JavaScript library for creating "select-all" checkboxes

SelectAllCheckbox v1.0 See LICENSE for this software's licensing terms. SelectAllCheckbox is a JavaScript library which makes it easy to create "selec

Jul 27, 2021

Converts select multiple elements into dropdown menus with checkboxes

jquery-multi-select Converts select multiple elements into dropdown menus with a checkbox for each option. The original select element is hidden

Dec 8, 2022

Highly customizable checkboxes and radio buttons (jQuery & Zepto)

iCheck plugin 1.0.3 Highly customizable checkboxes and radio buttons for jQuery and Zepto. Refer to the iCheck website for examples. Note: iCheck v2.0

Aug 24, 2022

đŸ€– Tailwind CSS assistant helps you to edit classes (includes JIT & ignores purge), toggle breakpoint classes on an element and view current breakpoint

đŸ€– Tailwind CSS assistant helps you to edit classes (includes JIT & ignores purge), toggle breakpoint classes on an element and view current breakpoint

Tailwind CSS Assistant See it in action on this example website 🎉 ✅ Small JavaScript package that helps you work with Tailwind CSS by... Showing you

Dec 28, 2022

An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

Demo : https://blackx-732.github.io/AwesomeMenu/ Under open source license No ©copyright issues Anyone can be modify this code as well Specifically we

Feb 9, 2021

A Bootstrap plugin to create input spinner elements for number input

A Bootstrap plugin to create input spinner elements for number input

bootstrap-input-spinner A Bootstrap / jQuery plugin to create input spinner elements for number input. Demo page with examples Examples with floating-

Nov 7, 2022
Comments
  • Wrong alignment of switch when

    Wrong alignment of switch when "box-sizing: border-box;" is not set on switch element

    Hi Adam,

    thank you for your library!

    I had a hard time getting the alignment of the switch button correct with the example code.

    Running the example on a clean homepage without any CSS framworks included, the buttons were displayed as in this image: switch_wrong_alignment

    Strangely, the buttons are displayed correctly when just including bootstrap.css as seems to be the case for the examples I found on Google: switch_correct_alignment

    The reason I found just now, these framworks apply the global style "box-sizing: border-box;" which is not a browser default at least on Firefox and current Chrome versions.

    I fixed this by adding the global style, but this is also fixed by adding it to the switch element CSS as with the following patch:

    diff --git a/toggle-switchy.css b/toggle-switchy.css
    index dd6ac4a..e6f7acb 100644
    --- a/toggle-switchy.css
    +++ b/toggle-switchy.css
    @@ -34,7 +34,7 @@ CORE STYLES BELOW - NO TOUCHY
     .toggle-switchy > input[disabled] + .toggle {opacity:0.5;}
     .toggle-switchy > input[disabled] + .toggle:hover {cursor:not-allowed;}
     .toggle-switchy > input + .toggle {width:100%; height:100%; margin:0; cursor:pointer;}
    -.toggle-switchy > input + .toggle > .switch {display:block; height:100%; position:absolute; right:0; z-index:3;}
    +.toggle-switchy > input + .toggle > .switch {box-sizing:border-box; display:block; height:100%; position:absolute; right:0; z-index:3;}
    

    HTH, best wishes.

    bug 
    opened by ul-gh 3
  • Fixed bug with square color switches

    Fixed bug with square color switches

    Fixing bug when using the non-rounded switch with a color, the border of the switch was not the correct color.

    Also updated the docs to add a square version of the switch below the rounded version.

    opened by nacho656 2
  • Square switch with color bug

    Square switch with color bug

    Fixing bug when using the non-rounded switch with a color, the border of the switch was not the correct color.

    Also updated the docs to add a square version of the switch below the rounded version.

    opened by nacho656 1
  • Add icon support

    Add icon support

    Examples image

    image <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentcolor" class="css-1lr7thp e1w77hao0" style="transform: translateX(18px);"><path d="M19.934 7.656a.224.224 0 000-.316L18.66 6.065a.224.224 0 00-.316 0l-7.909 7.907a.224.224 0 01-.316 0L6.656 10.51a.224.224 0 00-.316 0l-1.274 1.274a.224.224 0 000 .316l5.053 5.054a.224.224 0 00.316 0l9.5-9.498z"></path></svg>

    enhancement 
    opened by adamculpepper 0
Releases(1.14)
Owner
Adam Culpepper
Senior UI Developer, JavaScript Developer, speaker, published author, organizer @ Refresh Baton Rouge, runner, kayaker & Body Mod enthusiast.
Adam Culpepper
Access the Nintendo Switch Online and Nintendo Switch Parental Controls app APIs.

Access the Nintendo Switch Online and Nintendo Switch Parental Controls app APIs. Includes Discord Rich Presence, friend notifications and data downloads.

Samuel Elliott 201 Jan 6, 2023
❀ A heart-shaped toggle switch component for React.

heart-switch A heart-shaped toggle switch component for React. Inspired by Tore Bernhoft's I heart toggle Dribbble shot. ?? Table of Contents ?? Getti

Anatoliy Gatt 413 Dec 15, 2022
Execute obsidian commands with short key sequences. For example, 'tp' for 'Toggle Preview' and 'tb' for 'Toggle Sidebar'. Easier to remember.

Key Sequence Shortcut Key Sequence Shortcut is an obsidian plugin, allow binding key sequences to an obsidian command. For example If we assume "t" st

Yu Wang 26 Dec 26, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till mÀnniskor pÄ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Form To CSS - jQuery-Plugin form to CSS generator

Create your own CSS generator with the form to css generator Builder plugin. Can be usefull to create your own css builder or a Wordpress plugin or any kind of apps you need a real time css generator. For example, you can create a button generator

Gino 4 Sep 26, 2021
Kuldeep 2 Jun 21, 2022
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro

Vic ShĂłstak 35 Aug 24, 2022
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Jan 9, 2023