Lightning Components Developer Guide
jNewer Version Available
Checkboxes
Checkboxes are clickable and actionable, and they can be presented in a group for multiple selection. You can create a checkbox with ui:inputCheckbox, which inherits the behavior and events from ui:input. The value and disabled attributes control the state of a checkbox, and events such as click and change determine its behavior. Events must be used separately on each checkbox.
Here are several basic ways to set up a checkbox.
- Checked
- To select the checkbox, set value="true". This example sets the inital value
of the
checkbox.
- Disabled State
-
The previous example results in the following HTML.
Working with Events
Common events for ui:inputCheckbox include the click and change events. For example, click="{!c.done}" calls the client-side controller action with the function name, done.
The following code crosses out the checkbox item.
Styling Your Checkboxes
The ui:inputCheckbox component is customizable with regular
CSS styling. This example shows a checkbox with the following image.
The following CSS style replaces the default checkbox with the given image.