Radios & Checkboxes

Apply a custom style to radio and checkbox inputs.

Clique.UI styles radios and checkboxes through a combined use of the CSS property appearance and custom markup applied by the Form Component. By using JavaScript to help create the Radio and Checkbox components, Clique.UI is able to fire custom events when a user interacts with your form elements.

If you don't include the Form Component in your build of Clique.UI radios and checkboxes will fall back to the native browser style.


Usage

By including the core/form.js file in your project, any input with the [type="checkbox"] or [type="radio"] will automatically be wrapped in customizable, cross-browser compatible elements creating beautifully styled checkboxes and radios.

Usage

  • Class Description
    .form-radio This class is added to the wrapping element of a radio button element.
    .form-checkbox This class is added to the wrapping element of a checkbox element.

    Sub Objects

    Class Description
    .form-{type}-check This class is applied to the <span> element that defines the check visibile when the input is in an active state.

    States

    Class Description
    .checked Added to the .form-{type} element when the input is checked.
    .unchecked Added to the .form-{type} element when the input is not checked.
    .disabled Added to the .form-{type} element when the input is disabled.
  • <span class="form-radio unchecked"><input type="radio"><span class="form-radio-check"></span></span> Unchecked
    <span class="form-radio checked"><input type="radio" checked><span class="form-radio-check"></span></span> Checked
    <span class="form-radio disabled"><input type="radio" disabled><span class="form-radio-check"></span></span> Disabled
    
    <span class="form-checkebox unchecked"><input type="checkebox"><span class="form-checkebox-check"></span></span> Unchecked
    <span class="form-checkebox checked"><input type="checkebox" checked><span class="form-checkebox-check"></span></span> Checked
    <span class="form-checkebox disabled"><input type="checkebox" disabled><span class="form-checkebox-check"></span></span> Disabled
    		

JavaScript

Manual Initialization

// Clique.UI API
Clique.checkbox('.my-checkbox');
Clique.radio('.my-radio');

// jQuery API
$('.my-checkbox').clique('checkbox');
$('.my-radio').clique('radio');

Options

This components accepts no options.

Events

Name Parameters Description
clique.checbox.checked event Triggered whenever the checkbox is checked
clique.checbox.unchecked event Triggered whenever the checkbox is unchecked
clique.radio.checked event Triggered whenever the radio is checked
clique.radio.unchecked event Triggered whenever the radio is unchecked