Create ON/OFF Switch

[adetwiler]

Not sure if anyone has mentioned this or not, but it would be cool to have something like this:

http://papermashup.com/demos/ajax-switch/

[mdo]

I've been thinking about adding just such a feature. We'll see if we can get to it.

[huzzi]

+1

[dbpolito]

:+1:

[Anahkiasen]

+1 for this feature, currently I've replaced entries with only two choices by togglable buttons in my forms, but on/off switches would be far more user-friendly and consistent with today's interfaces.

[Nerian]

+1 Would be really useful

[barryvdh]

Maybe something like the jQuery Mobile implementation (uses the select input) http://jquerymobile.com/demos/1.0.1/docs/forms/switch/

[jhajduk]

+1

[jbranchaud]

+1, great idea!

[g00fy-]

+1

[thomshouse]

+1!

[jlxw]

+1!

[jlxw]

whats the best solution now? checkbox?

[adetwiler]

@jlxw For right now I am using the Radio buttons: http://twitter.github.com/bootstrap/javascript.html#buttons

[thomshouse]

I've created a very simple proof-of-concept using a single checkbox. Emphasis on proof-of-concept... It's not good for much else beyond that, but I think it gets the point across: http://jsfiddle.net/76mxJ/1/

Edit: A variation (CSS transition is Webkit only): http://jsfiddle.net/76mxJ/2/

[charettes]

@adetwiler, @jlxw Here's a working example of toggle buttons I use instead of the current implementation which is, IMHO, more semantically correct and works out of the box with form inputs.

http://jsfiddle.net/charettes/WUXjX/11/

[tuladhasum]

+1

[thomshouse]

Been fiddling a bit more... (Hey, now I know why it's called jsfiddle.) This one is CSS-only, no JS required:

http://jsfiddle.net/76mxJ/3/

[charettes]

Here's a moz working version http://jsfiddle.net/charettes/76mxJ/4/

[thomshouse]

...and again with sliding animations. Now with moz compatibility too:

http://jsfiddle.net/76mxJ/6/

I am going to try to fork and add this feature this weekend, if people like my work so far... and if I have the patience to figure out the build process. :D

[charettes]

@thomshouse thanks for the idea here's a no JS required working toggle buttons http://jsfiddle.net/charettes/SauLj/

[quasipickle]

This is a great control idea, but in most implementations it's limited to only being a switch between opposites (on/off, yes/no). I've used this type of control in situations where there are only 2 options, but they are not obvious opposites, ie: any/all.

If this control were added, I would like to see it added in such a way that both options are visible .

[victorhooi]

Hi,

I'd love to see something like this as well =).

@thomshouse @markdotto: Is there any word on this getting into Bootstrap officially?

Cheers, Victor

[thomshouse]

@victorhooi Sorry, I got sidetracked last weekend and haven't had a chance to come back to this.

[add1ct3dd]

+1

[trask]

+1

[hacfi]

I started working on a form plugin to replace select dropdowns, checkbox and radio icons last night...will publish the repo in a week or two. However, I don't think this should be part of the bootstrap "core".

@markdotto have you thought about a additional plugin repository or page?

[timburgess]

+1

[lastguest]

+1

[younes0]

+1

[JoeConyers]

+1

[blanchardjeremy]

+1

[richardp-au]

Here's a few versions that I've been working on. They support all of Bootstrap's standard colours (just like buttons, labels, etc.).

• Bootstrap Switch 1 Webkit only switch as it restyles a checkbox. Very simple HTML but not cross-browser at all. (Based on http://forr.st/~vqz)
• Bootstrap Switch 2 Uses JavaScript to toggle active class on outer div. Has checkbox inside to enable form submission. (Based on http://css3wizardry.com/2011/12/18/ios-5-style-switch-control/)
• Bootstrap Switch 3 My own first attempt. This has the slide animation but suffers from a Webkit bug where the overflow outside rounded borders isn't hidden for child elements - this is obvious when the switch is off.
• Bootstrap Switch 4 My second version which doesn't suffer from the overflow bug in Webkit since the 'on' colour is resized/hidden instead of sliding. It still looks like everything is sliding but it isn't. Unfortunately this needs an extra child span though.

Number 4 is looking the best and works almost perfectly in Safari, Chrome and IE9 (obviously IE9 doesn't have any gradients and I haven't checked Firefox yet). Unfortunately, IE7 and 8 aren't looking so great since they lack support for the :checked selector for checkboxes. Unless there's an alternative (which I don't know of), it might need to use JavaScript to toggle an active class as well as the checkbox, which would be a combination of 2 and 4. I'll work on that later.

Please let me know what you guys think.

[richardp-au]

Ok, I've revised my switch and here's my latest:

• Bootstrap Switch 5 This version uses Bootstrap's data-api to keep the HTML short and simple while using JavaScript to control the actual switching via toggling a class (since the checkbox isn't cross-browser enough).

This version requires minimal HTML and uses the data-api to create the necessary child spans that make it all happen. It also uses JavaScript to perform the switching by toggling the active class, instead of using the label and checkbox with the :checked pseudo-selector. To trigger the data-api, simply add data-toggle="switch" to your switch element.

In addition, you can use the on and off options (or data-on and data-off attributes) to set the switch text. The defaults are ON and OFF and apply to any missing attributes.

I have also added a checkbox option (or data-checkbox attribute) which specifies whether or not you'd like a hidden checkbox included too. Simply set the option to a string and that will become the name of the checkbox. (An empty string or an omitted attribute means that no checkbox will be included.) This should make it easier to use the switch as a checkbox replacement because you won't need to change backend code that handles the checkbox input.

Please help me test the jsFiddle. I've found it works in Safari, Chrome, IE9, IE8 (no rounded corners of course), IE7 (doesn't have the text though) and Firefox (I found the CSS transitions were a bit out of sync though). I've included the LESS inside a comment this time too.

@markdotto and @fat: Please let me know what you think of this so far.

[dbpolito]

@r1ch0 Seems pretty good to me. Great work!

[cfletcher1856]

@r1ch0 :+1:

[add1ct3dd]

They look good, but for me way too large/rounded.

[richardp-au]

@add1ct3dd: they're the same size as Apple's ones on iOS.

[thomshouse]

Please excuse the crudity of this model... ;) I'm too exhausted to really pretty it up right now, but here's a new mock-up based on a combination of my old one and some of the others I've seen here: http://jsfiddle.net/VEW2K/

A rundown:

• No javascript.
• No extra tags (just a checkbox and a label).
• Should degrade gracefully.

I have not tested it in IE or Firefox, and I was not able to get CSS transitions working on the :before and :after pseudo content, so maybe someone else will have better luck. But I think it's cleaner than my old test, and I prefer a non-JS solution personally.

[richardp-au]

@thomshouse That won't work on IE 7 and 8 for the same reasons my earlier attempts didn't work. Both IE 7 and 8 don't support the :checked CSS3 selector, which basically means that using an actual checkbox to track the state isn't possible and therefore JavaScript is required. Also you use the :not CSS3 selector, which is also not supported in these browsers. Of course, you could change your CSS by changing the two lines to .input-switch { display: none; } and remove the :not selector.

The other problem is the IE7 doesn't support :before and :after. I had the same problem myself which is why I ended up having child spans. The only place I still use :before and :after is in the text labels which is why they don't show up on IE7. So the question is whether we leave it as is (no text labels for IE7) or add another child element in the HTML.

Refer to http://www.quirksmode.org/css/contents.html#CSS3 for compatibility.

[thomshouse]

@r1ch0 That's why I said it should degrade gracefully. :P The :checked and :not(:checked) selectors should prevent the switch from rendering at all in browsers incapable of the selector, and should instead render the default checkbox and label without any issue.

I guess the correct term would be "progressive enhancement"? Old browsers show the stock chrome, new browsers will show the customizations. Same concept behind the @media responsive CSS already in place in Bootstrap.

[richardp-au]

@thomshouse Ok so I missed that point :)

However, if it's possible to to make it work on an old browser (which it is with JS), then wouldn't that be better? It's no different from BS's buttons which require JS for the checkbox or radio modes.

Also, when using the data API, you don't actually have to type any JS so I don't really think it's a problem having JS in there.

[thomshouse]

However, if it's possible to to make it work on an old browser (which it is with JS), then wouldn't that be better?

I guess that's a decision best left for @fat and @markdotto. They have a better understanding of the principles behind Bootstrap's than I could ever hope to have. :)

It could be done both ways, too... CSS-only for the browsers that support it, JS-based for the others. I guess we'll know when we see what makes it into 2.1.

[pixelyunicorn]

:+1:

I also think that there should be a disabled state, a middle state, and different sizes along with an option for square edges... (iOS 4/earlier-like)

[richardp-au]

I would like to add a disabled state to mine.

As for a "middle" state, I'm not sure it's appropriate to this type of switch. Also, if it's modelled of something like iOS (as mine are), then it probably wouldn't be a good idea to change an already very common UI element in this way.

I suppose different sizes could be doable in a similar fashion to buttons. The current size (of mine once again) is the same as iOS's and also the same height as BS's text fields.

Lastly, I don't see any reason to have an option for square buttons. If you want them, you can always change the border radius yourself. This applies to other elements too, such as badges.

[raduluchian]

+1 Using @r1ch0 's fiddle for now, but it would be nice to see it in 2.0.

[marshallbu]

+1

[Fabs]

+1

[cemo]

+1 for 2.1.0

[sbert]

+1

[shaneog]

:+1: