A UI on/off button component for use with component. Bind to an input field and turn it into a sleek button.

Tested in Chrome, Firefox, Safari, Opera, IE9+

Styles inspired by Hugh Giraudel

Check out the related dial component

View Example

component install jsantell/button

Create a new button instance, linked to inputEl. On status is determined by the checked state of the input, or you may pass in a boolean on to set the initial state. On instantiation, the button is rendered, original checkbox hidden, and events bound.

var Button = require('button');
var input = document.getElementById('inputEl');
var button = new Button(input, true);

Sets button to either on or off based off of val's truthiness.

Reconstructs the button's el property containing the button element. Already called during instantiation.

Binds events necessary for the button on the button element, as well as the input element.

Unbinds the events related to the button.

Hides the corresponding input field. Already called on instantiation.

Displays the corresponding input field. Called on destroy, or call it manually to display the element.

Destroys the button element, reveals original input element and unbinds button events

Button inherits from Emitter, so all emitter methods apply. By default, only a change event is fired when the button's value changes, which can be hooked into via:

var button = new Button(input);
button.on('change', function (val) {
  console.log('Is button on? ' + val);
});