Bootstrap switch
Inputs switch.min.js
Overview

Turn checkboxes and radio buttons into toggle switches. This library is created by Mattia Larentis and maintained by the core team, with the help of the community.

Usage

The plugin is jQuery and Bootstrap dependent. Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load Bootstrap -->
<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/styling/switch.min.js"></script>

Create an HTML element with id, class, or name attributes:

<!-- Create element -->
<input type="checkbox" name="my-checkbox" checked="checked">

Finally call the plugin via JavaScript:

// Initialize plugin
$(function() {
	$("[name='my-checkbox']").bootstrapSwitch({
		// options
	});
});
Plugin options

The Options API allows you to customize the dropdown list by setting custom options and getting all current options.

Name Attribute Default Description
state checked true The checkbox state
size data-size null The checkbox size
animate data-animate true Animate the switch
disabled disabled false Disable state
readonly readonly false Readonly state
indeterminate data-indeterminate false Indeterminate state
inverse data-inverse false Inverse switch direction
radioAllOff data-radio-all-off false Allow this radio button to be unchecked by the user
onColor data-on-color 'primary' Color of the left side of the switch. Supports all BS contextual classes
offColor data-off-color 'default' Color of the right side of the switch. Supports all BS contextual classes
onText data-on-text 'ON' Text of the left side of the switch
offText data-off-text 'OFF' Text of the right side of the switch
labelText data-label-text '&nbsp;' Text of the center handle of the switch
handleWidth data-handle-width 'auto' Width of the left and right sides in pixels
labelWidth data-label-width 'auto' Width of the center handle in pixels
baseClass data-base-class 'bootstrap-switch' Global class prefix
wrapperClass data-wrapper-class 'wrapper' Container element class(es)
onInit
function(event, state) {}
Callback function to execute on initialization
onSwitchChange
function(event, state) {}
Callback function to execute on switch state change
Plugin methods

In Bootstrap Switch, every option is also a method. If the second parameter is omitted, the method return the current value.

You can invoke methods as follows:

// Methods
$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);

Available methods:

Name Description
toggleState Toggle the switch state
toggleAnimate Toggle the animate option
toggleDisabled Toggle the disabled state
toggleReadonly Toggle the readonly state
toggleIndeterminate Toggle the indeterminate state
toggleInverse Toggle the inverse option
destroy Destroy the instance of Bootstrap Switch
Plugin events

All the events are namespaced, therefore always append .bootstrapSwitch when you attach your handlers.

You can register to the emitted events as follow:

// Events
$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
	console.log(this); // DOM element
	console.log(event); // jQuery event
	console.log(state); // true | false
});

Available events:

Name Description
init Triggered on initialization. 'this' refers to the DOM element
switchChange Triggered on switch state change. 'this' refers to the DOM element
Plugin info
Property Description
File name switch.min.js
Location assets/js/plugins/forms/styling/
Updates 0
Links

Official plugin website

Github project page
Switchery
Inputs switchery.min.js
Overview

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly. Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/styling/switchery.min.js"></script>

Create an HTML element with id, class, or name attributes:

<!-- Create element -->
<input type="checkbox" name="my-checkbox" checked="checked" class="switcher">

Finally call the plugin via JavaScript:

// Initialize plugin
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
Plugin options
Name Default Description
color '#64bd63' Color of the switch element (HEX or RGB value)
secondaryColor '#dfdfdf' Secondary color for background color and border, when the switch is off
jackColor '#fff' Default color of the jack/handle element
jackSecondaryColor null Color of unchecked jack/handle element
className 'switchery' Class name for the switch element (by default styled in switchery.css)
disabled false Enable or disable click events and changing the state of the switch (boolean value)
disabledOpacity 0.5 Opacity of the switch when it's disabled (0 to 1)
speed '0.4s' Length of time that the transition will take, ex. '0.4s', '1s', '2.2s' (Note: transition speed of the handle is twice shorter)
size 'default' Size of the switch element (small or large)
Plugin API
Name Description
.destroy() Unbinding all event handlers attached to the switch element to prepare the object for garbage collection
.enable() Enable disabled switch by re-adding event handlers and changing the opacity to 1
.disable() Disable switch by unbinding attached events and changing opacity to disabledOpacity value
.isDisabled() Check if switch is currently disabled by checking the readonly and disabled attributes on the checkbox and the disabled option set via JS. If any of those are present, the returned value is true
Plugin info
Property Description
File name switchery.min.js
Location assets/js/plugins/forms/styling/
Updates 0
Links

Official plugin website

Github project page
Uniform
Inputs uniform.min.js
Overview

Sexy form elements with jQuery. Now with HTML5 attributes! Works well with jQuery 1.6+, but we've received patches and heard that this works with jQuery 1.3.

Usage

Installation of Uniform is quite simple. First, make sure you have jQuery installed. Then you’ll want to link to the jquery.uniform.js file in the head area of your page.

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/forms/styling/uniform.min.js"></script>

Create an HTML element with id, class, or name attributes:

<!-- Create element -->
<input type="checkbox" name="my-checkbox" checked="checked" class="styled">

Finally call the plugin via JavaScript:

// Initialize plugin
$("select").uniform({
	// options
});
Plugin options
Name Default Description
autoHide true If this option is set to true, Uniform will hide the new elements if the existing elements are currently hidden using display: none.If you want to show a select or checkbox you'll need to show the new Uniform div instead of the child element
eventNamespace ".uniform" Binds events using this namespace with jQuery. Useful if you want to unbind them later. Shouldn't probably need to be changed unless it conflicts with other code
idPrefix "uniform" If useID is set to true, this string is prefixed to element ID’s and attached to the container div of each Uniformed element. If you have a checkbox with the ID of "remember-me" the container div would have the ID "uniform-remember-me"
useID true If true, sets an ID on the container div of each form element. The ID is a prefixed version of the same ID of the form element
submitDefaultHtml "Submit" This text is what's shown on form submit buttons. It is very similar to resetDefaultHtml
activeClass "active" Sets the class given to elements when they are active (pressed)
buttonClass "button" Sets the class given to a button that's been Uniformed
checkboxClass "checker" Sets the class given to the wrapper div for checkbox elements
checkedClass "checked" Sets the class given to elements when they are checked (radios and checkboxes)
disabledClass "disabled" Sets the class given to elements when they are disabled
inputAddTypeAsClass true When true, <input> elements will get a class applied that is equal to their "type" attribute
inputClass "uniform-input" Applies this class to all input elements when they get uniformed
radioClass "radio" Sets the class given to the wrapper div for radio elements. Should be changed to .choice
focusClass "focus" Sets the class given to elements when they are focused
hoverClass "hover" Sets the class given to elements when they are currently hovered
textareaClass "uniform" The class that is applied to textarea elements
wrapperClass null When uniforming, the top level element that wraps the input is given this class. When elements would not normally be given a wrapper element, this option will create a wrapper element anyway. This can really help with running multiple themes on a single page
fileButtonClass "action" Sets the class given to div inside a file upload container that acts as the "Choose file" button
fileButtonHtml "Choose File" Sets the text written on the action button inside a file upload input
fileClass "uploader" Sets the class given to the wrapper div for file upload elements
fileDefaultHtml "No file selected" Sets the text written in the filename div of a file upload input when there is no file selected
filenameClass "filename" Sets the class given to div inside a file upload container that spits out the filename
resetDefaultHtml "Reset" This text is what's shown on form reset buttons. It is very similar to submitDefaultHtml
resetSelector false This parameter allows you to use a jQuery-style selector to point to a "reset" button in your form if you have one. Use false if you have no "reset" button, or a selector string that points to the reset button if you have one
selectAutoWidth true If this option is set to true, Uniform will try to fit the select width to the actual content. When false, it forces the selects to all be the width that was specified in the theme.
When using auto widths, the size of the element is detected, then wrapped by Uniform and expanded to fit the wrapping
selectClass "selector" Sets the class given to the wrapper div for select elements, but not multiselects
selectMultiClass "uniform-multiselect" Sets the class given to the wrapper div for select elements that are multiselects
Plugin API
Name Description
$.uniform.update([elem/selector string]); If you need to change values on the form dynamically you must tell Uniform to update that element’s style. Fortunately, it’s very simple. Just call this function, and Uniform will do the rest
$.uniform.update(); If you don't mind updating all Uniformed elements or just don’t specifically know which element to update, you can just leave out the parameter and Uniform will update all Uniformed elements on the page
$.uniform.restore([elem/selector string]); If you want to "un-uniform" something, simply call this function. It will remove the inline styles, extra dom elements, and event handlers, effectively restoring the element to it's previous state
$.uniform.elements[] You can get an array of all the elements that have been Uniformed at any time using this public variable. I don't advise changing the contents!
Tips and tricks

Uniform is supposed to be pretty simple, but there are a few things that can be tricky. Here are some tips that may make your experience simpler:

  • Remember to change the CSS classes in the theme if you change the parameters for elements’ classes. This can be tedious work, but if you don’t do it, it’s not going to look correct. Find and Replace is your friend.
  • Uniform cannot automatically sniff out dynamic value changes. If you make changes to elements in JavaScript or using a reset button of some kind, remember to call $.uniform.update(); to sync the changes with Uniform. See Issue #270 for the little bit of code you will need.
  • Likewise, when you add elements to the DOM, perhaps via AJAX, and they need to get styled, you will need to use $('#newElement').uniform() on it so the styling is applied.
  • There is a bug in Safari 5.1 that will cause the web rendering process to crash when you use custom fonts. For more information, see Issue #183.
  • With IE9, you may have problems with some fonts on your site. See Issue #226 if you mysteriously see a blank page or blank form elements. The fonts in Uniform have been arranged to work around this, but custom themes may not work properly.
  • If you are having problems with automatically sized select elements in Firefox, double check and ensure your CSS files are listed before jQuery, Uniform and your code that uniforms the form elements. Also check the selectAutoWidth property's documentation.
Plugin info
Property Description
File name uniform.min.js
Location assets/js/plugins/forms/styling/
Updates 0
Links

Official plugin website

Github project page