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]

👍

[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

[auzigog]

+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 👍

[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]

👍

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]

👍

[gilbert]

@charettes has the best solution, in my opinion: http://jsfiddle.net/charettes/SauLj/

[raduluchian]

@mindeavor That solution is already available in Bootstrap under Javascript Plugins > Button.

[gilbert]

@raduluchian True, but it requires javascript, and doesn't have radio button markup. @charettes 's solution requires no javascript and only a little css.

[nijikokun]

I've created a solution for this and its an actual on/off switch and visually matching of bootstrap. I will be releasing it in a moment.

[nijikokun]

@fat @adetwiler

Actually just everyone:
http://nijikokun.github.com/bootstrap-toggle/
http://github.com/nijikokun/bootstrap-toggle/

[richardp-au]

@mindeavor The solution you refer to (from @charettes) won't work in IE 7 and 8 because it uses :checked.

[charettes]

@R1ch0 @mindeavor, as discussed in #2284 it would be possible to add a shim for IE 7 and 8. @kwilliams did a great job there.

[thomshouse]

Since we're getting all fancy... :P
http://jsfiddle.net/VEW2K/2/

I actually like a lot of things about @nijikokun's version, but I think a flat color would look better for the recessed area. I also feel like there's something "off" about the widths, but I can't place it... As for new features, thought it would be nice to be able to use the .spanX classes for special sizes.

[nijikokun]

@thomshouse if you happen to fork mine and add that functionality I'll accept the pull request, if not, i'll probably add it in later.

Also, the flat colors are nice, but I think it should be optional, maybe a .flat class.

[Garbee]

+1

[tobsn]

+1

[richardp-au]

+1

Seriously? Can people not read?

[Dentxinho]

@nostalgiaz nice one!

Thumbs up to @R1ch0's too!

[nostalgiaz]

@Dentxinho thanks :) Do you need some new features?

[Dentxinho]

@nostalgiaz having options to set the transition speed would be great ;)

[nostalgiaz]

@Dentxinho can you open me an issue? :)

[Dentxinho]

@nostalgiaz done =)

[johnlabu]

+1

[johnaschroeder]

+1

[abestic9]

This is my (in production use) solution, but I may consider the jsFiddles from r1ch0:

http://jsfiddle.net/abestic9/GQnFA/

Simply a grouped button set, all standard bootstrap classes can be applied (I use btn-mini in some areas, for example)

[Intrepidd]

Hey guys !

First of all thanks a lot @R1ch0 for your amazing switchs !

I had a problem w/ the change event not triggered for the checkbox when clicking the switch (switch number 5)

so i changed line 34 of the js file and it now looks like that :

this.$checkbox && this.$checkbox.attr('checked', $el.hasClass(active)) && this.$checkbox.trigger('change')

Hope i helped !

[richardp-au]

Thanks for the heads up @Intrepidd. I haven't actually needed to use the switches yet so I haven't done a lot of testing on them. I have thought of some changes I'd like to make if I ever get the chance.

As far as your change, you could simplify it a little:

this.$checkbox && this.$checkbox.attr('checked', $el.hasClass(active)).trigger('change')

[Intrepidd]

Indeed, i forgot that .attr() can be chained, my bad ;)

[ghost]

+1

[calvinjuarez]

+1

[jeronimonunez]

+1

[nostalgiaz]

This is my solution, I pushed the latest update an hour ago... Open me an issue if you have some suggestions or if you wanna report bugs. Hope you like it :)

https://github.com/nostalgiaz/bootstrap-toggle-buttons

[jeronimonunez]

@nostalgiaz Looks good but it would be perfect if it were working like JQM toggle switch component: http://jquerymobile.com/demos/1.2.0-pre/docs/forms/switch/

[nostalgiaz]

@jeronimonunez open me an issue, ok?

[jeronimonunez]

@nostalgiaz done! ;)

[nostalgiaz]

@jeronimonunez ok! I've just released my 2.0 bootstrap toggle buttons! Do you like it?

[jeronimonunez]

@nostalgiaz looks really good! I'm going to test it on android and ios, I'll tell you if there's any issue.

[nostalgiaz]

@jeronimonunez thanks :)

[skyrpex]

Any chances that @nostalgiaz solution will be integrated into the bootstrap?

[nostalgiaz]

@skyrpex wow! It would be great! I made a branch called feature/boostrap where you can find the first implementation of a possible version for bootstrap... but before investing more time I would like some feedback from them

[stevenwong]

@nostalgiaz solution looks good, but doesn't work with Zepto unfortunately. Zepto just doesn't completely replicate what jQuery does. I.e. .data() and .data('name', object) won't work. $element.find('>div') and $.extend(true, ...) only supported in the master.

Can't use this for my mobile project yet I suppose

[nelsonad]

Here's what I'm doing: http://jsfiddle.net/6KCzE/

[fission6]

@nostalgiaz this is nice stuff, great work - someone pull this into bootstrap!

[nostalgiaz]

@fission6 thank you :)

[stefanozoffoli]

This would be awesome: http://www.chrisnorstrom.com/2012/11/invention-multiple-choice-windowed-slider-ui/

[mdo]

I've been back and forth with this a lot and I think for now we'll punt on this. That said, do checkout Ratchet and see if you can port their switch. For now, as this falls under custom form elements, we won't be adding it.

[ghinda]

I've just finished work on the latest version of my own CSS-only accessible toggle switches, and the latest version also adds full support for Bootstrap and Foundation. They support both checkboxes and radios.

You can check it out here:
http://ghinda.net/css-toggle-switch/bootstrap.html

It's really flexible and can use a number of classes from Bootstrap, for both the track and the sliding button.

[nostalgiaz]

This is my initial solution for an easy-to-use switch (using the @mdo 's guidelines)

Here you can find the code: https://github.com/nostalgiaz/bootstrap-switch

and here the demo: http://www.larentis.eu/switch/

[marstone]

+1

[t3hnar]

+1

[yagudaev]

@nostalgiaz great job! That looks great, thanks for the hard work :). Looking forward to using this one.

👍

[nostalgiaz]

@yagudaev thanks!

[adobi]

You may take a look at this one: iOS 6 switch style checkboxes with pure CSS Example and code here

[ChinaXing]

+1

[marcotisi]

+1

[leettastic]

+1

[phptux]

+1

[DmitryEfimenko]

+1

[cezarlz]

+1

[Madlord]

+1

[JasPanesar]

+1

[unematiii]

+1

[marclaporte]

+1

[henrywright]

+1

[coderdave]

+1

[ZacharyDraper]

+1

[DrWeir]

+1

[brunomac]

+1

Bruno Machado

On 03/08/2013, at 13:33, Weir notifications@github.com wrote:

+1

—
Reply to this email directly or view it on GitHub.

[patrickhlauke]

i'd be careful, regardless which one is proposed, that it needs keyboard focus indication and a proper label...