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 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 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")); } })
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 |
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. |