Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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.
1swfobject.registerObject("clippy.codeblock-0", "9");<aura:attribute name="check" type="Boolean" default="true"/>
2<ui:inputcheckbox value="{!v.check}"/>
Disabled State
1swfobject.registerObject("clippy.codeblock-1", "9");<ui:inputCheckbox disabled="true" label="Select" />

The previous example results in the following HTML.

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

Working with Events

Common events for ui:inputCheckbox include the click and change events. For example, click="{!c.done}" calls the client-side controller action with the function name, done.

The following code crosses out the checkbox item.

1swfobject.registerObject("clippy.codeblock-3", "9");<!--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 elem = event.getSource().getElement();
7        $A.util.toggleClass(elem, "done");
8     }

Styling Your Checkboxes

The ui:inputCheckbox component is customizable with regular CSS styling. This example shows a checkbox with the following image.Date and time fields with date picker

1swfobject.registerObject("clippy.codeblock-4", "9");<ui:inputCheckbox labelClass="check" 
2                  label="Select?" value="true" />

The following CSS style replaces the default checkbox with the given image.

1swfobject.registerObject("clippy.codeblock-5", "9");.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 }