Input Checkbox (Deprecated)

We recommend using Lightning Web Components whenever possible. When migrating to Lightning Web Components, use lightning-input with checkbox, toggle, or checkbox-button type. For checkbox groups, use lightning-checkbox-group.

For more information, see Aura Components in the ui Namespace Are Deprecated.

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 uiInput--default uiInput--checkbox">
2  <label class="uiLabel-left form-element__label uiLabel">
3    <span>Reimbursed?</span>
4  </label>
5  <input type="checkbox" />
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
3<ui:inputCheckbox label="Color me" click="{!c.update}" />

1/** Client-Side Controller **/
2update : function (cmp, event) {
3  $A.util.toggleClass(event.getSource(), "red");
4}