CheckBox
<input id="repair_cover_glass_broken" 
    type="checkbox"
    value="Cover glass broken"
    data-win-control="HFWinJSCtrl.CheckBox" 
    data-win-options="{ 
        label: 'Cover glass broken', 
        list: true, 
        defaultValue: true,
        style: 'default | highlightChecked | toggleButton',
        toggle: {
            defaultClass: 'hf-radio-red', 
            checkedClass: 'highlight'
            }
        }">
| Property | Type | How to use | Description | 
|---|---|---|---|
| defaultValue | Boolean | defaultValue: true | Set the defaultValue to "true" to display the CheckBox as checked by default. | 
| disabled | Boolean | disabled: true | Set "true" whenever the checkbox should be disabled. The default value is false. | 
| doNotCopy | Boolean | doNotCopy: true | Set "true" whenever the field should get deleted if form is copied. | 
| label | String | label: 'Cover glass broken' | Define a label set next to the checkbox (optional) | 
| htmlLabel | String | htmlLabel: 'Cover glass <strong>broken</strong>' | Define a label that allows html tags inside the text set next to the checkbox. If a label and a htmlLabel is set, the htmlLabel overwrites the label. | 
| list | Boolean | list: true | Set "true" whenever the content should show up in the list on the dashboard. | 
| listOptions | Object | listOptions: {...} | Set additional options for controls with list equals true. E.g. set custom label for filter/sort/group dialogs or hide them complettely. | 
| persistent | String | persistent: 'user' | The value "user" sets the initial value of the checkbox to the value of the previous form item of the current user and overwrites any defaultValue. | 
| required | Boolean | required: true | Set "true" if the control has to be filled in. | 
| style | String | `style: 'default | highlightChecked | 
| toggle | String | toggle: {defaultClass: 'hf-radio-orange', checkedClass: 'highlight'} | Define up to two CSS classes applied to the container-div of the checkbox to emphasize the toggle-effect of the form control. At least the "defaultClass" has to be defined. Note: Use in case of style: 'toggleButton to assign the background color, this option is ignored in case of the other two possibilities. | 
| tooltip | String | tooltip: 'Please indicate at least one cause of damage.' | Write a comment to provide further information about the field. A question mark will then be shown within the label and with a click/tap on it, the information will occur. | 
| visiting | Boolean | visiting: true | Set "true" whenever the form element should be marked as "visited" when the user has clicked or tapped at the form field. | 
| onChanged | Function(value: boolean, hfValue: string) | onChanged: HFFormdefinition.Namespace.Method | Call a pre-defined JS-method to do something when the status of the control changes | 
listOptions Object​
| Property | Type | How to use | Description | 
|---|---|---|---|
| dialogText | String | dialogText: 'Display Text' | Set custom label for filter/sort/group dialogs. | 
| dialogHide | Boolean | dialogHide: true | Hide field from filter/sort/group dialogs. | 
Stored data​
<input id="repair_cover_glass_broken" type="checkbox"
    data-win-control="HFWinJSCtrl.CheckBox" value="Cover glass broken"
    data-win-options="{ label: 'Cover glass broken', list: true, defaultValue: true }"
>
For each checked CheckBox inside your forms there are two value pairs of stored data:
First the information if the Checkbox is checked
{
    "id": "repair_cover_glass_broken",
    "value": true
}
and for the defined value:
{
    "id": "repair_cover_glass_broken_HFValue",
    "value": "Cover glass broken"
}