Replace standard checkboxes with an on/off switch.


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.


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



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.


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.