checkbox

7min

Checkboxes on mobile app forms offer a straightforward way to make selections, especially for multiple options, enhancing usability and interaction. 
The component is used in a jig.default﻿ inside of a form﻿ component and supports single- and multiple-selection options. The checkbox's initial checkbox status and required checkbox status can be set.
Checkbox preview
﻿
﻿Configuration options﻿
﻿
Core structure
﻿
instanceId
The unique identifier for the checkbox component.
label
Provide a label/name for the checkbox. 'Label' is displayed as a placeholder when no value is specified.
Other options
﻿
color
Sets the color of the checkbox based on conditions by using the when property. First evaluated to true will be used. Choose a color from the provided color palette. Default color is grey if the property is not specified in the YAML. See the list of available colors in Jigx color palette﻿.
errorText
Add text, string, or expressions to show text under the checkbox indicating an error/invalid value in the field. Text is shown in isNegative (red) styling.
helperText
Add text, string, or expressions to guide users by showing text under the checkbox. Helper text is displayed only when there is no errorText. 
icon
Add an icon to the title. A list of icons is available. See Jigx icons﻿ for more information.
initialValue
The initialValue is the value that the checkbox will load with when the form is initially loaded. You can use this property to preset the checkbox value so that the user doesn't have to manually select it. Set to true loads the checkbox as selected, false loads the checkbox as unselected. Using the reset-state action with initialValues does not clear the checkbox, it resets the field back to it's initialValue. 
isAutoFocused
If true it will get focus immediately after the 
﻿ is displayed.
isHidden
If true the checkbox will be hidden on the form. If set to false the field will be shown.
isIgnored
When true, the field will be ignored when submitting the form and the content will not be stored.
isOptionalLabelHidden
If the field is optional you can turn off the "(optional)" label by setting this field to true. This property works in combination with isRequired: false.
isRequired
Set to true when the field is required. Useful when you use it in form submission. Set to false the checkbox is optional and will have an (optional) in the label.
nextProperty
Name of the property you want to focus next in the form when you use return/next on a keyboard.
style
The following property settings are available:
- flex - Flex property if rendered inside row.
- isDanger - when the checkbox is selected the component displays in red.
- isDisabled - makes the checkbox  field un-selectable.
- isPositive when the checkbox is selected the component displays in green.
- isWarning - displays the component in red.
More than one can be true. It will be evaluated based on priority.
value
The value to show for the checkbox. Setting up a checkbox with a value property of true will display the checkbox as selected when the form loads, setting the property to false will display the checkbox as unselected when the form loads.
Actions
﻿
onChange
The action is triggered when the content in the checkbox is changed. Use IntelliSense (ctrl+space) to see the list of available actions. 
onPress
OnPress action overwrites the main check / uncheck functionality.
State Configuration
Key
Notes
[email protected].
value
State is the variable of the component.
[email protected].
activeItemId
now
Global state variable that can be used throughout the solution.
There's also the option to configure checkboxes as part of entity-field﻿ or list-item﻿.
﻿Examples and code snippets ﻿
Checkbox on Form - Single Selection (Yes/No Question)
Checkbox on a form
﻿
The component displays a yes/no question about the agreement to the Terms and Conditions. The option is preselected as the agreement is in our case required. 
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
check-box (static)
check-box (dynamic)
datasources (dynamic)
children:
  - type: component.form
    instanceId: agreement-form
    options:
      children:
        - type: component.checkbox
          instanceId: agreement
          options:
            label: I agree
            isRequired: true
            initialValue: true
children:
  - type: component.form
    instanceId: agreement-form
    options:
      children:
        - type: component.checkbox
          instanceId: agreement
          options:
            label: I agree
            isRequired: true
            initialValue: true
﻿
Checkbox on Form - Multiple Selection
Multiple checkbox selection
﻿
This example displays a question you can answer by selecting multiple checkboxes. The most common answers are already checked for better user experience, but the selection can always be changed.
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
checkbox-multiple (static)
checkbox-multiple (dynamic)
datasources (dynamic)
children:
  - type: component.form
    instanceId: work-engagement-form
    options:
      children: 
         - type: component.checkbox
           instanceId: sunday
           options:
             label: [email protected]-options[0].day
             isRequired: false
         - type: component.checkbox
           instanceId: monday
           options:
             label: [email protected]-options[1].day
             initialValue: true
             isRequired: false
         - type: component.checkbox
           instanceId: tuesday
           options:
             label: [email protected]-options[2].day
             initialValue: true
             isRequired: false
         - type: component.checkbox
           instanceId: wednesday
           options:
             label: [email protected]-options[3].day
             initialValue: true
             isRequired: false
         - type: component.checkbox
           instanceId: thursday
           options:
             label: [email protected]-options[4].day
             initialValue: true
             isRequired: false
         - type: component.checkbox
           instanceId: friday
           options:
             label: [email protected]-options[5].day
             initialValue: true
             isRequired: false
         - type: component.checkbox
           instanceId: saturday
           options:
             label: [email protected]-options[6].day
             isRequired: false
children:
  - type: component.form
    instanceId: work-engagement-form
    options:
      children: 
         - type: component.checkbox
           instanceId: sunday
           options:
             label: =@ctx.datasources.checkbox-options[0].day
             isRequired: false
         - type: component.checkbox
           instanceId: monday
           options:
             label: =@ctx.datasources.checkbox-options[1].day
             initialValue: true
             isRequired: false
         - type: component.checkbox
           instanceId: tuesday
           options:
             label: =@ctx.datasources.checkbox-options[2].day
             initialValue: true
             isRequired: false
         - type: component.checkbox
           instanceId: wednesday
           options:
             label: =@ctx.datasources.checkbox-options[3].day
             initialValue: true
             isRequired: false
         - type: component.checkbox
           instanceId: thursday
           options:
             label: =@ctx.datasources.checkbox-options[4].day
             initialValue: true
             isRequired: false
         - type: component.checkbox
           instanceId: friday
           options:
             label: =@ctx.datasources.checkbox-options[5].day
             initialValue: true
             isRequired: false
         - type: component.checkbox
           instanceId: saturday
           options:
             label: =@ctx.datasources.checkbox-options[6].day
             isRequired: false
﻿
See also
﻿State﻿﻿
﻿

Core structure
instanceId	The unique identifier for the checkbox component.
label	Provide a label/name for the checkbox. 'Label' is displayed as a placeholder when no value is specified.

Other options
color	Sets the color of the checkbox based on conditions by using the when property. First evaluated to true will be used. Choose a color from the provided color palette. Default color is grey if the property is not specified in the YAML. See the list of available colors in Jigx color palette.
errorText	Add text, string, or expressions to show text under the checkbox indicating an error/invalid value in the field. Text is shown in isNegative (red) styling.
helperText	Add text, string, or expressions to guide users by showing text under the checkbox. Helper text is displayed only when there is no errorText.
icon	Add an icon to the title. A list of icons is available. See Jigx icons for more information.
initialValue	The initialValue is the value that the checkbox will load with when the form is initially loaded. You can use this property to preset the checkbox value so that the user doesn't have to manually select it. Set to true loads the checkbox as selected, false loads the checkbox as unselected. Using the reset-state action with initialValues does not clear the checkbox, it resets the field back to it's initialValue.
isAutoFocused	If true it will get focus immediately after the is displayed.
isHidden	If true the checkbox will be hidden on the form. If set to false the field will be shown.
isIgnored	When true, the field will be ignored when submitting the form and the content will not be stored.
isOptionalLabelHidden	If the field is optional you can turn off the "(optional)" label by setting this field to true. This property works in combination with isRequired: false.
isRequired	Set to true when the field is required. Useful when you use it in form submission. Set to false the checkbox is optional and will have an (optional) in the label.
nextProperty	Name of the property you want to focus next in the form when you use return/next on a keyboard.
style	The following property settings are available: - flex - Flex property if rendered inside row. - isDanger - when the checkbox is selected the component displays in red. - isDisabled - makes the checkbox field un-selectable. - isPositive when the checkbox is selected the component displays in green. - isWarning - displays the component in red. More than one can be true. It will be evaluated based on priority.
value	The value to show for the checkbox. Setting up a checkbox with a value property of true will display the checkbox as selected when the form loads, setting the property to false will display the checkbox as unselected when the form loads.

Actions
onChange	The action is triggered when the content in the checkbox is changed. Use IntelliSense (ctrl+space) to see the list of available actions.
onPress	OnPress action overwrites the main check / uncheck functionality.

State Configuration	Key	Notes
[email protected].	value	State is the variable of the component.
[email protected].	activeItemId now	Global state variable that can be used throughout the solution.