Checkboxes

Checkboxes are clickable and actionable, and they can be presented in a group for multiple selection. You can create a checkbox with ui:inputCheckbox, which inherits the behavior and events from ui:input. The value and disabled attributes control the state of a checkbox, and events such as click and change determine its behavior. Events must be used separately on each checkbox.

Here are several basic ways to set up a checkbox.

Checked

To select the checkbox, set value="true". This example sets the inital value of the checkbox.

1<aura:attribute name="check" type="Boolean" default="true"/>
2<ui:inputcheckbox value="{!v.check}"/>

Disabled State

1<ui:inputCheckbox disabled="true" label="Select" />

The previous example results in the following HTML.

1<div class="uiInput uiInputCheckbox uiInput--default uiInput--checkbox">
2<label class="uiLabel-left form-element__label uiLabel" for="globalId"><span>Select</span></label>
3<input disabled="disabled" type="checkbox id="globalId">

1<!--The checkbox-->
2    <ui:inputCheckbox label="Cross this out" click="{!c.crossout}" class="line" />
3    
4    /*The controller action*/
5    crossout : function(cmp, event){
6        var cmpSource = event.getSource();
7        $A.util.toggleClass(cmpSource, "done");
8     }

1<ui:inputCheckbox labelClass="check" 
2                  label="Select?" value="true" />

1.THIS input[type="checkbox"] {
2    display: none;
3}
4
5.THIS .check span {
6    margin: 20px;
7}
8
9.THIS input[type="checkbox"]+label {
10    display: inline-block;
11    width: 20px;
12    height: 20px;
13    vertical-align: middle;
14    background: url('images/checkbox.png') top left;
15        cursor: pointer;
16}
17
18.THIS input[type="checkbox"]:checked+label {
19     background:url('images/checkbox.png') bottom left;
20 }