Skip to main content
Version: 9.6

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
Radio buttons

FormControl Options​

defaultValue​

Set the initial status of the RadioBox to "selected". A custom code function can be used to set defaultValue.

How to use: defaultValue: true
Type: boolean | function
Signature: function() => boolean

deselectable​

Set "false" whenever the radio button should not be deselectable.

How to use: deselectable: false
Type: boolean
Default: true

disabled​

Set "true" whenever the radio button should be disabled.

How to use: disabled: true
Type: boolean

doNotCopy​

Set "true" whenever the field should get deleted if form is copied.

How to use: doNotCopy: true
Type: boolean

hidden​

Hide FormControl in Form.

How to use: hidden: true
Type: boolean

htmlLabel​

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).

How to use: htmlLabel: 'Free / warranty repair'
Type: string

label​

Define a label set next to the RadioBox (optional)

How to use: label: 'Free / warranty repair'
Type: string

list​

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.

How to use: list: true
Type: boolean

listOptions​

Set additional options for controls with list equals true. E.g. set custom label for filter/sort/group dialogs or hide them complettely.

How to use: listOptions: {...}
Type: { dialogText: string, dialogHide: boolean }

onChanged​

Call a pre-defined JS-method to do something when the status of the control changes.

How to use: onChanged: HFFormdefinition.Namespace.Method
Type: function
Signature: function(data: { value: boolean, hfValue: string }) => void

persistent​

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.

How to use: persistent: 'user'
Type: 'user'

required​

Set "true" if the control has to be filled in.

How to use: required: true
Type: boolean

style​

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.

How to use: style: 'highlightChecked'
Type: 'default' | 'highlightChecked' | 'toggleButton' | 'backgroundHighlight'

toggle​

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.

How to use: toggle: {defaultClass: 'hf-radio-orange', checkedClass: 'highlight'}
Type: string

visiting​

Set "true" whenever the form element should be marked as "visited" when the user has clicked or tapped at the form field.

How to use: visiting: true
Type: boolean

listOptions Object​

dialogHide​

Hide field from filter/sort/group dialogs.

How to use: dialogHide: true
Type: boolean

dialogText​

Set custom label for filter/sort/group dialogs.

How to use: dialogText: 'Display Text'
Type: string

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.