Switch

Replace standard checkboxes with an on/off switch.


Usage

To apply the Switch component, add the data-switch attribute to a checkbox and load the Switch component files on your page. The component JavaScript will create the HTML and bind all events.

Usage

  • <input type="checkbox" data-switch>

JavaScript

Options

Option Data Type Default Description
labels object
{
	off : 'Off',
	on : 'On'
}
An plain object containing strings that determine what the state labels will display. These values may also contain HTML.

Initialization

Data Attribute

<input type="checkbox" data-switch="{<!-- Options... -->}">

Clique.UI API

var switch = Clique.switch('.my-switch', {
	// Options...
});

jQuery API

var switch = $('.my-switch').clique('switch', {
	// Options...
});

Callback Events

Name Parameters Description
init.clique.switch event Triggered when a switch is fully intiialized - all HTML has been built and event listeners bound.
willswitch.clique.switch event Fires when a user has click or dragged the switch, but before the element's state has changed.
didswitch.clique.switch event, newState Fires after the transition has completed and state has changed.