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.
<ui:inputCheckbox label="Reimbursed?"/>
This example results in the following HTML.
<div> <label> <span>Reimbursed?</span> </label> <input type="checkbox"> </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.
<!-- Component Markup --> <ui:inputCheckbox label="Color me" click="{!c.update}"/> /** Client-Side Controller **/ update : function (cmp, event) { $A.util.toggleClass(event.getSource(), "red"); }
<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? |
---|---|---|---|
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". | |
errors | List | The list of errors to be displayed. | |
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”. |
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. |
select | COMPONENT | The event fired when the user selects some text. |
blur | COMPONENT | The event fired when the user moves off from the component. |
focus | COMPONENT | The event fired when the user focuses on the component. |
keypress | COMPONENT | The event fired when the user presses or holds down a keyboard key on the component. |
keyup | COMPONENT | The event fired when the user releases a keyboard key on the component. |
keydown | COMPONENT | The event fired when the user presses a keyboard key on the component. |
cut | COMPONENT | The event fired when the user cuts content to the clipboard. |
onError | COMPONENT | The event fired when there are any validation errors on the component. |
onClearErrors | COMPONENT | The event fired when any validation errors should be cleared. |
change | COMPONENT | The event fired when the user changes the content of the input. |
copy | COMPONENT | The event fired when the user copies content to the clipboard. |
paste | COMPONENT | The event fired when the user pastes content from the clipboard. |