ui:inputCheckbox | Lightning Components Developer Guide

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<ui:inputCheckbox label="Color me" click="{!c.update}"/>
3
4/** Client-Side Controller **/
5update : function (cmp, event) {
6  $A.util.toggleClass(event.getSource(), "red");
7}

This example retrieves the value of a ui:inputCheckbox component.

1<aura:component>
2 <aura:attribute name="myBool" type="Boolean" default="true"/>
3 <ui:inputCheckbox aura:id="checkbox" label="Select?" change="{!c.onCheck}"/>
4 <p>Selected:</p>
5 <p><ui:outputText class="result" aura:id="checkResult" value="false" /></p>
6 <p>The following checkbox uses a component attribute to bind its value.</p>
7 <ui:outputCheckbox aura:id="output" value="{!v.myBool}"/>
8</aura:component>

1({
2	 onCheck: function(cmp, evt) {
3		 var checkCmp = cmp.find("checkbox");
4		 resultCmp = cmp.find("checkResult");
5		 resultCmp.set("v.value", ""+checkCmp.get("v.value"));
6
7	 }
8})

Attributes

Attribute Name	Attribute Type	Description
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`class`	String	A CSS style to be attached to the component. This style is added in addition to base styles output by the component.
`disabled`	Boolean	Specifies whether the component should be displayed in a disabled state. Default value is "false".
`label`	String	The text displayed on the component.
`labelClass`	String	The CSS class of the label component
`name`	String	The name of the component.
`required`	Boolean	Specifies whether the input is required. Default value is "false".
`requiredIndicatorClass`	String	The CSS class of the required indicator component
`text`	String	The input value attribute.
`updateOn`	String	Updates the component's value binding if the updateOn attribute is set to the handled event. Default value is "change,click".
`value`	Boolean	Indicates whether the status of the option is selected. Default value is “false”.

Events

Event Name	Event Type	Description
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`click`	COMPONENT	Indicates that a component has been clicked.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`select`	COMPONENT	Indicates that the user has made a selection.
`blur`	COMPONENT	Indicates that a component has been put out of focus.
`focus`	COMPONENT	Indicates that a component has been put on focus.
`keypress`	COMPONENT	Indicates that the user has pressed and held down a keyboard key.
`keyup`	COMPONENT	Indicates that the user has released a keyboard key.
`keydown`	COMPONENT	Indicates that the user has pressed and released a keyboard key.
`cut`	COMPONENT	Indicates that the user has cut content to the clipboard.
`validationError`	COMPONENT	Indicates that the component has validation error(s).
`clearErrors`	COMPONENT	Indicates that any validation error should be cleared.
`change`	COMPONENT	Indicates that the content of a component or the state has changed.
`copy`	COMPONENT	Indicates that the user has copied content to the clipboard.
`paste`	COMPONENT	Indicates that the user has pasted content from the clipboard.