Lightning Components Developer Guide
jNewer Version Available
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.
1<aura:attribute name="myBool" type="Boolean" default="true"/>
2<ui:outputCheckbox value="{!v.myBool}"/>The previous example renders the following HTML.
1<img class="checked uiImage uiOutputCheckbox" alt="checkbox checked" src="path/to/checkbox">This example shows how you can use the 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 | 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. |