checkBox

Creates a form check box.

Field Configurations

Key	Type	Description	Default Value
"images"	Array	The displayed images for a checked and unchecked box.	"Standard checkbox images."
"scaleType"	ScaleType	Defines how the value's image should fit into the layer's frame.	"scaleAspectFit"
"values"	Array	The value given by checked or unchecked box.	["0","1"]

Inherited

From Form Layer

Form Layer

Field Configurations

Key	Type	Description	Default Value
"form"	String	Name of the form e.g. used to access the value of the form outside of its view.	null
"formDataKey"	String	Datakey used to access the value of the form layer.	null
"onChanged"	Array	Actions to execute when the form value is changed.	null
"settingsDataKey"	String	If set, the value of the form layer will be written into the _settings table.	null
"validationErrorMessage"	String	Message to display in case the input is invalid.	null
"validationExpression"	String	Regex to use in the validateForm action.	null
"valueActionIndex"	String	Index of the value action.	null
"valueActions"	Array	Actions to be executed when a specified value is set e.g. hiding a layer when a checkbox is selected.	null

From Base Layer

Base Layer

Field Configurations

Key	Type	Description	Default Value
"_value"	Value	[PREVIEW] Dynamic value of the layer.	null
"actions"	ActionList	List of actions, which will be executed when the layer is tapped.	null
"borderColor"	Color	The color of the border in hex color value.	null
"borderRadius"	UnitSize	The radius applies to all corners; with a borderWidth of 0 the border is not drawn and radius is set anyway.	0
"borderWidth"	UnitSize	The width of the border.	0
"bottomLeftRadius"	UnitSize	Radius for the bottom left corner.	0
"bottomRightRadius"	UnitSize	Radius for the bottom right corner.	0
"classes"	Array	List of classes for layer styles.	null
"conditions"	Conditions	List of conditions to alter the layer state.	null
"constraints"	Constraints	A list of constraints defining the position of the layer in a layout.	null
"consumesKeyboard"	Boolean	This layer will be used to shrink, if a keyboard is shown.	null
"dataKey"	String	Name for assigning data to this layer.	null
"hidden"	Boolean	Indicates whether the layer is hidden. Default: false.	false
"layerRotation"	Number	The layer is rotated by the specified degree.	0
"name"	String	Unique name in the layout. Used for alignment or actions.	null
"opacity"	Number	The opacity of the layer.	1
"overInsetBottom"	Boolean	Determines if this layer ignores the save space at the bottom of the device.	false
"overInsetTop"	Boolean	Determines if this layer ignores the save space at the top of the device.	false
"safeArea"	SafeAreaTypeObject	Determines the safe area behaviour.	null
"shadowElevation"	Number	The elevation of this layer for casting shadows.	0
"state"	String	The state the layer will use as default.	"default"
"states"	LayerStates	A list of named states that affect the appearance of the layer.	null
"topLeftRadius"	UnitSize	Radius for the top left corner.	0
"topRightRadius"	UnitSize	Radius for the top right corner.	0
"touchFeedback"	TouchFeedback	Determines if the layer should show a touch feedback if touched.	"visible"
"trackingKey"	String	Defines a key for a scroll event.	null
"type"	LayerType	The type of the layer	null
"value"	Value	(Initial) value of the layer.	null

Examples

Example 1: Create a simple check box.

Goal: Create a simple check box.

To achieve this the following code can be used:

{
  "type": "container",
  "borderColor": "#f3f3f3",
  "borderWidth": "1pt",
  "borderRadius": "10pt",
  "constraints": [
    {
      "type": "pos",
      "x": "50%",
      "y": "35%",
      "anchor": "c"
    },
    {
      "type": "size",
      "height": "40pt",
      "width": "300pt"
    }
  ],
  "children": [
    {
      "type": "color",
      "value": "#34a7c9",
      "classes": [
        "fullSize"
      ]
    },
    {
      "type": "text",
      "value": "ACCEPT",
      "fontColor": "#f3f3f3",
      "scaleType": "alignLeft",
      "fontSize": "20pt",
      "constraints": [
        {
          "type": "pos",
          "x": "10pt",
          "y": "0",
          "anchor": "w",
          "relativeAnchor": "w"
        },
        {
          "type": "size",
          "height": "30pt"
        }
      ]
    },
    {
      "type": "checkBox",
      "name": "acceptBox",
      "form": "form",
      "formDataKey": "accept",
      "constraints": [
        {
          "type": "pos",
          "x": "-10pt",
          "y": "0",
          "anchor": "e",
          "relativeAnchor": "e"
        },
        {
          "type": "size",
          "height": "20pt",
          "width": "20pt"
        }
      ]
    }
  ]
}

Simple example of the checkbox layer that is grouped in a container layer.

Result:

A checkBox layer has been created.