Checkbox
Guide for using checkboxes in your applications
Last updated
Was this helpful?
Guide for using checkboxes in your applications
Last updated
Was this helpful?
This guide will show how to use a checkbox in your applications. See how easy it is to drag and drop the checkboxes onto your forms and connect them to your business logic. Checkbox can be modified, styled and even changed at runtime.
To see a live sample of the component you can go .
In the , drag the Checkbox component from the Pallet onto the form.
The checkbox, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the checkbox in the to see a list of properties in the . Below are some common properties and how to set them at design-time.
The text displayed on a checkbox can be modified by setting its property. Most often, this will just be plain text. In this case, just enter the value into the editor or directly on the component by double-clicking it. For more options open the .
Checkboxes, like many components, can display tooltip messages when a user hovers their cursor. Most often, this will just be plain text that describes what value will be checked or unchecked. In this case, just enter the value into the editor. For more options open the .
Like all components, a checkbox can be styled using themes, variants and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the styleClass property.
If you are using Variants, then you can easily drag and drop variations of your checkbox onto your form.
Like most components, checkbox have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a checkbox is the onDataChange event, which is triggered when the checkbox is clicked.
Checkbox, like many components, can be modified at runtime through code. Below are a few examples of controlling a checkbox from code.
You can easily change the enabled state of a checkbox at runtime.
Like most components, a checkbox has API methods which can be called from code. Below is an example of common API calls.
You can easily add a style class to a checkbox using the addStyleClass method.
The following articles are recommended for additional reading:
Remember that text can also be dynamic, data-driven or localized. For more options, you can open edit the text property in the .
For example, styleClass="checkbox"
To Handle the event, double-click the value for the onDataChange property in the . You will see the . You'll have the option select an existing Method or create a new Method. The method will be called when the component's onDataChange event is fired and the object will be passed to it.
See the for comprehensive list of
See the for a complete list of programmable and .