Checkbox

The UI component Checkbox allows the user to easily input data of type boolean. You can bind this UI component to a property, which can allow you to persist this user input to the database. They serve a similar function to the Switch component.

You can see an example setup of the Checkbox in the UI Components App in our Showroom! You can try the component, as well as access the setup in Appfarm Create. If you do not have access, you can register here.

Settings

Here are some of the properties in Appfarm Create which are custom for the Checkbox:

Value

The data source property or variable that the user input is bound to. This must be of data type boolean. This can be an App Variable, a Runtime Only Object Class property, or a Database Connected Object Class property.

A property of data type boolean is not automatically true or false by default. A boolean property is by default undefined. Binding a checkbox to such a property will display similarly to false. Once checked, the property is set to true. Once unchecked, the property is set to null. This behaviour can be seen with an example in the Showroom.

Unless you want a boolean property to have more than 2 states (true or false) it is recommended to have a default value (see Value on Create) set to false or true.

To make sure that you handle undefined, null and false the same way, it is also recommended to use the following pattern in conditions or filters to represent "equals false": Use NOT EQUALS true.

Label

This text gives further information about what the Checkbox means when it is either ticked or left unticked. This can be static text or bound to a data source, while a JavaScript can also be used to display more helpful and intuitive output to the user.

Auto Focus

When selected, this component will gain focus automatically when the screen is rendered.

Tab Index

Users can use the Tab key to navigate between inputs and components on a screen. This property tells Appfarm Create which index to bind to the current Checkbox. This value should only be given when you want to override the default tab index. Using a tab index of -1 will remove the component from the tab index.

Appearance

Color

The colour of the component can be configured to Primary, Secondary or Default. Primary and Secondary refer to the primary and secondary colours of the chosen app theme, while Default does not change the colour of the checkbox.

Margin

Three choices are available for this property. These define the margin style between this component and other UI components on the screen.

• Normal

• Dense

• None

Size

Checkboxes can be of size Small or Medium. An example of the difference between small and medium sizes is available in the Showroom.

Label Placement

Labels can be configured to appear at the Start, End, Top or Bottom of the Checkbox component.

Event Handlers

Event Handlers can detect a specific event occurring in Appfarm Create and can link these events to actions. One Event Handler is available for the Checkbox component:

On Value Change: This Event Handler will run an action when a change is detected in the data source bound to the component. For example, if the data input changes from false to true, or vice versa, a specific action can be performed.