When used in plain Bootstrap form, everything is fine:

<form>
        <div class="checkbox checkbox-slider--default">
            <label>
                <input type="checkbox"><span>TiTaToggle</span>
            </label>
        </div>
    </form>

When used within form-horizontal:

<form class="form-horizontal">
        <div class="checkbox checkbox-slider--default">
            <label>
                <input type="checkbox"><span>TiTaToggle</span>
            </label>
        </div>
    </form>

then, because of this Bootstrap css rule, and this property: padding-top: 7px:

.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}

the handle and its container are not top aligned - the container is pushed down, but not the handle.

A way to correct, for my limited css knowledge, may be to add margin-top: 7px; to this rule

.checkbox-slider--default input + span:after {
  background: #ffffff;
  border: solid transparent 1px;
  background-clip: content-box;
}

and all other rules like this one.

Regards and thanks for great component!
Tomasz

Take a look at this example: http://jsfiddle.net/L9mzV/
Where you can have the text on the right vs the left.

Is it possible to do the same here ?

Hi!

This looks like a great plugin!

What is the browser support for these checkboxes?

Use 2 radiobuttons (group) to toggle a value/switch, the same way as a checkbox does currently.
Semantically not ideal but this is no ideal world :)

See it here:
http://kleinejan.github.io/titatoggle/

It should be gray, not green.

Have a look at this page. There seems to be no difference.
https://kleinejan.github.io/titatoggle/

Make the same pattern for Radio buttons.
A two way toggle between values.

Printing does not print switches but does print checkboxes. Otherwise, it is plum! :)

Hi @kleinejan ,
We are cdnjs team, we want to host this library on cdnjs.
I found that license in package.json show BSD-2-Clause but there is GNU-General-Public-License-v2.0.txt in the repo. Could you please help me check which license used for the repo? Thanks.

cdnjs/cdnjs#7859
cdnjs/cdnjs#8064

Hello!

I would like to use titatogle but I don't work with node. How I can install and use without node? For example, I work with bootstrap 4. Maybe, I just need to change the css? Please, a step by step would be nice. Thank you.

Nice job. Is it possible to turn radio buttons into switches. I use bootstrap switch but I would prefer a pure less solution. Thank you.

I'm trying to get the sliders to be positioned relative to the text vs relative to the parent. When I have a container where the text is centered and I want the checkboxes centered, its no bueno.

What do you think about supporting an :indeterminate state for checkbox inputs?

Hi there, Thanks for your work! It's great and so simple solution!

But I have one problem - it's checking and unchecking the styled checkbox via JS. Here is the demo http://take.ms/ysu1S , I can't set checked attribute to the styled checkbox. Do you have any ideas here?

When do you plan to release a new version with the last most recent changes?

The name defined in package.json doesn't conform to the NPM standards as detailed here
https://docs.npmjs.com/files/package.json#name

Specifically:

- New packages must not have uppercase letters in the name.

This prevents the package being installed at all using npm3

When you click on the toggle you get a focus ring or outline when using Chrome (I'm using latest version on Mac). Safari and Firefox don't have this issue.

I can't seem to get rid of it using the usual :focus {outline: none;} or
outline-style:none;
box-shadow:none;
border-color:transparent;

Hello. I've included the titatoggle-dist.css into my ReactJS project but the toggle doesn't seem to be working (looks disabled). Is there something I may be doing wrong?

<div className="checkbox checkbox-slider--b-flat checkbox-slider-warning"><input type="checkbox" /><span></span></div>

Hi there. Somehow the responsiveness of these are impacted when used on a cordova project with iOS. It seems that there is an initial delay before hand.

I am using this one in my case:

  <div class="checkbox checkbox-slider--c checkbox-slider-info">
    <label>
      <input type="checkbox"><span>something</span>
    </label>
  </div>

When running grunt serve and played through chrome there is no performance issues.
When running cordova emulate ios or cordova build ios and loading it on iPhone through xCode that is when there is a 0.5second delay.

Would you have any idea to why?

Thank you! and otherwise very cool stuff.

This results in a green slider - it should be red:

<div class="checkbox checkbox-slider--a-rounded checkbox-slider-danger">
    <label>
        <input type="checkbox" checked><span>checked</span>
    </label>
</div>

I'd love to be able to toggle between states like "absolute/relative" what that text currently within the toggle where the "On/Off" text currently lives. Is there a way to customize this?

I'm trying to duplicate the results here:
http://kleinejan.github.io/titatoggle/

Specifically, first and last lines of this:

Using this code:

<div class="checkbox checkbox-slider--default">
	<label>
		<input type="checkbox">
		<span>default</span>
	</label>
</div>
		
<div class="checkbox checkbox-slider--default">
	<label>
		<input type="checkbox" disabled>
		<span>disabled</span>
	</label>
</div>

I get this instead:

Here's the test project.
titatoggle.zip

Your example seems to reference classes which are not in titatoggle-dist.css.