ui:outputCheckbox

Displays a checkbox in a checked or unchecked state.

A ui:outputCheckbox component represents a checkbox that is rendered as an HTML img tag. This component can be used with ui:inputCheckbox, which enables users to select or deselect the checkbox. To select or deselect the checkbox, set the value attribute to true or false. To display a checkbox, you can use an attribute value and bind it to the ui:outputCheckbox component.

<aura:attribute name="myBool" type="Boolean" default="true"/>
<ui:outputCheckbox value="{!v.myBool}"/>

The previous example renders the following HTML.

<img class="checked uiImage uiOutputCheckbox" alt="checkbox checked" src="path/to/checkbox">

This example shows how you can use the ui:inputCheckbox component.

<aura:component>
 <aura:attribute name="myBool" type="Boolean" default="true"/>
 <ui:inputCheckbox aura:id="checkbox" label="Select?" change="{!c.onCheck}"/>
 <p>Selected:</p>
 <p><ui:outputText class="result" aura:id="checkResult" value="false" /></p>
 <p>The following checkbox uses a component attribute to bind its value.</p>
 <ui:outputCheckbox aura:id="output" value="{!v.myBool}"/>
</aura:component>
({
	 onCheck: function(cmp, evt) {
		 var checkCmp = cmp.find("checkbox");
		 resultCmp = cmp.find("checkResult");
		 resultCmp.set("v.value", ""+checkCmp.get("v.value"));

	 }
})

Attributes

Attribute Name Attribute Type Description Required?
altChecked String The alternate text description when the checkbox is checked. Default value is “True”.
altUnchecked String The alternate text description when the checkbox is unchecked. Default value is “False”.
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.
value Boolean Specifies whether the checkbox is checked. Yes

Events

Event Name Event Type Description
dblclick COMPONENT The event fired when the user double-clicks the component.
mouseover COMPONENT The event fired when the user moves the mouse pointer over the component.
mouseout COMPONENT The event fired when the user moves the mouse pointer away from the component.
mouseup COMPONENT The event fired when the user releases the mouse button over the component.
mousemove COMPONENT The event fired when the user moves the mouse pointer over the component.
click COMPONENT The event fired when the user clicks on the component.
mousedown COMPONENT The event fired when the user clicks a mouse button over the component.