ui:inputCheckbox

A ui:inputCheckbox component represents a checkbox whose state is controlled by the value and disabled attributes. It's rendered as an HTML input tag of type checkbox. To render the output from a ui:inputCheckbox component, use the ui:outputCheckbox component.

This is a basic set up of a checkbox.

1<ui:inputCheckbox label="Reimbursed?"/>

This example results in the following HTML.

1<div class="uiInput uiInputCheckbox">
2  <label class="uiLabel-left uiLabel">
3    <span>Reimbursed?</span>
4  </label>
5  <input type="checkbox" class="uiInput uiInputCheckbox">
6</div>

The value attribute controls the state of a checkbox, and events such as click and change determine its behavior. This example updates the checkbox CSS class on a click event.

1<!-- Component Markup -->
2<ui:inputCheckbox label="Color me" click="{!c.update}"/>
3
4/** Client-Side Controller **/
5update : function (cmp, event) {
6  var elem = event.getSource().getElement();
7  $A.util.toggleClass(elem, "red");
8}

Attributes

Events