RadioBox

<input
    id="billing_free_warranty"
    name="billing"
    type="radio"
    value="Free repair"
    data-win-control="HFWinJSCtrl.RadioBox"
    data-win-options="{ 
        label: 'Free / warranty repair',
        style: 'toggleButton',
        toggle: {
            defaultClass: 'hf-radio-green', 
            checkedClass: 'highlight'
            },
        }">

<input
    id="billing_invoice"
    name="billing"
    type="radio"
    value="Invoice"
    data-win-control="HFWinJSCtrl.RadioBox"
    data-win-options="{ 
        label: 'Invoice'
    }">

Radio buttons

| Property | Type | How to use | Description | | ------------ | ----------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | defaultValue | Boolean/Function | defaultValue: true | Set the initial status of the RadioBox to "selected". A custom code function can be used to set defaultValue. | | deselectable | Boolean | deselectable: false | Set "false" whenever the radio button should not be deselectable. The default value is true.| | disabled | Boolean | disabled: true | Set "true" whenever the radio button 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: 'Free / warranty repair' | Define a label set next to the RadioBox (optional)| | htmlLabel | String | htmlLabel: 'Free / warranty <strong>repair</strong>' | Define a label that allows html tags inside the text set next to the RadioBox. If a label and a htmlLabel is set, the htmlLabel overwrites the label (optional).| | list | Boolean | list: true | Set this property to "true" if data connected with this control should be a sorting/filtering/grouping option on the listpage, is used in template objects (eg. the listTemplate) or it should show up in admin ui listings. | | 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. | | mapping | Boolean | mapping: true | Set "true" whenever the form element should be visible / editable in the corresponding SharePoint list.| | persistent | String | persistent: 'user' | The value "user" sets the initial value of the RadioBox 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 | toggleButton | backgroundHighlight' | Define the display behaviour of the radiobox and its label depending on its status (checked/unchecked). Default is the previously familiar behavior, highlightChecked softens the unchecked input ctrl and its label and emphasizes the checked control by bold font and dark font color. | | 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(data: { value: boolean, hfValue: string }) | onChanged: HFFormdefinition.Namespace.Method | Call a pre-defined JS-method to do something when the status of the control changes.|

* These options are required.

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="billing_free_warranty"
    name="billing"
    type="radio"
    value="Free repair"
    data-win-control="HFWinJSCtrl.RadioBox"
    data-win-options="{ 
        label: 'Free / warranty repair'
    }">

<input
    id="billing_invoice"
    name="billing"
    type="radio"
    value="Invoice"
    data-win-control="HFWinJSCtrl.RadioBox"
    data-win-options="{ 
        label: 'Invoice'
    }">

For each RadioBox group inside your forms there are several value pairs of stored data – at least there are three:

One for the checked radio button

{
    "id": "billing_free_warranty",
    "value": true
}

one for the unchecked radio button

{
    "id": "billing_invoice",
    "value": false
}

and one value pair for the "result" i.e. the selected value

{
    "id": "billing_HFValue",
    "value": "Free repair"
}

Info

If you don't provide an HTML value, the label text next to and of the selected radio button will be stored.