Fork me on GitHub

Bootstrap 4 Ti-Ta-Toggle (addon without JS)

Using awesome toggle buttons without Javascript or any other logic, other than plane form elements. The Pattern is the same as Twitter-Bootstrap. So it can be implemented without a breeze.

Browser support: Internet Explorer 9/10/11, Edge, FireFox, Safari, Chrome, Safari Ios, Stock Android browser 4.2, Chrome Android

Version 1.0.0 of TitaToggle has support for Bootstrap v3.x.x

Default checkbox
With text
iOS like
Material like

Intro

The only difference between default Bootstrap checkbox is the structure. Titatoggle uses implicit labels. That makes life easy. So structure wise it's different from bootstrap.

Bootstrap 4

The Bootstrap 4 default way of generating checkbox looks a like this: 


<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

Ti-Ta-Toggle awesomenes


  .checkbox-slider--TYPE

you get this result:


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

Note:

Don't forget to add the span after the input

Slider default checkbox-slider--default

Out of the box this would be the modest version, without any bells and whistles.

Default
Small
Medium
Large

<div class="... checkbox-slider--default">
	...
</div>

Slider Default rounded checkbox-slider--a-rounded

It takes the edge off.

Default
Small
Medium
Large

<div class="... checkbox-slider--a-rounded">
	...
</div>

Slider A checkbox-slider--a

Sometimes you need some text to double the meaning / state of the checkbox. I've noticed many people have trouble with a checkbox, when it's "On" of "Off". To make this more clear, you can use this version.

Default
Small
Medium
Large

<div class="... checkbox-slider--a">
	...
</div>

Slider B checkbox-slider--b

An iOS like version of just a plain checkbox.

Default
Small
Medium
Large

<div class="... checkbox-slider--b">
	...
</div>

Slider B Flat checkbox-slider--b-flat

Just flat, it seems to be very fashionable. We just wait until the bevel is back.

Default
Small
Medium
Large

<div class="... checkbox-slider--b-flat">
	...
</div>

Slider C checkbox-slider--c

Inspired by the Google material toggle boxes. And again this is just plain Bootstrap 3.

Default
Small
Medium
Large

<div class="... checkbox-slider--c">
	...
</div>

Slider C Weight checkbox-slider--c-weight

Giving the slider some more weight.

Default
Small
Medium
Large

<div class="... checkbox-slider--c-weight">
	...
</div>

Sizes

Propper sizing option should get the pony over the hill for your next project.

Next to the default size there are 3 sizes:

Just like Bootstrap. In the case you need something special, use the _titatoggle.less to alther your preferend settings and sizes.

Default
Small
Medium
Large


<div class="... checkbox-slider-sm ...">
	...
</div>

<div class="... <DEFAULT> ...">
	...
</div>

<div class="... checkbox-slider-md ...">
	...
</div>

<div class="... checkbox-slider-lg ...">
	...
</div>

Indicator

Small visual que for the label to show that the form-check is checked.

Not so usable for the visually impaired, due to the fact it's only a color and contrast is to low. 


<div class="form-check ...">
...
  <span class="indicator-success">danger</span>
...
</div>

<div class="form-check ...">
...
  <span class="indicator-info">danger</span>
...
</div>

<div class="form-check ...">
...
  <span class="indicator-warning">danger</span>
...
</div>

<div class="form-check ...">
...
  <span class="indicator-danger">danger</span>
...
</div>

Variations

Checkboxes can have different colors, just like buttons.

We use the default Bootstrap variables @brand-XXX to color the checkbox.

Not so usable for the visually impaired, due to the fact it's only a color and contrast is to low. And keep in mind that colorblindness is a real fact.
Default
Info
Danger
Warning

Howto

Okay and now what?

You have a few options to include this into your project.

Install

Latest version (Bootstrap 4)

$ npm install titatoggle --save-dev

Previous version (Bootstrap 3)

$ npm install titatoggle@1.0.0 --save-dev

Bower

$ bower install titatoggle

SASS

Inside the project you will find _titatoggle.scss Include this file into your own project, and stuff just works. If needed, you can fiddle around with some sass variables.

CSS

There is alway the option to include only the titatoggle-dist.css. Keep in mind this thing is build on top off Bootstrap 3. 


	<link href="css/titatoggle-dist.css" rel="stylesheet">

License

GNU General Public License v2.0