Skip to main content
Version: Upcoming 🦄

RadioBox

An HTML RadioBox to be used in Forms.

<input
    id="billing_free_warranty"
    name="billing"
    type="radio"
    value="Free repair"
    data-hf-control="RadioBox"
    data-hf-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-hf-control="RadioBox"
    data-hf-options="{ 
        label: 'Invoice'
    }"
/>

Radio buttonsDark 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 the 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 completely.
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​

It is the value where the "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

copyValueFrom​

Define a FormControl that synchronizes its value with the current field. This synchronization process occurs upon navigating to the page where the current control is situated. It only occurs if the field is empty or the mode is set to "overwrite".

<input id="billing_invoice"
    name="billing"
    type="radio"
    value="Invoice"
    data-hf-control="RadioBox"
    data-hf-options="{ 
        label: 'Invoice',
        copyValueFrom: 'billing_free_warranty'
    }">
Option interface
interface ICopyValueFromObject {
    sourceId: string;
    mode: 'overwrite' | null;
    callback: (value: string) => string;
}

type CopyValueFromType = string | ICopyValueFromObject;

callback​

Specify a function to process value before copy.
How to use:
callback: HFFormDefinition.Namespace.processValue
Type: function
Signature: function(value: string) => string

mode​

Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
How to use:
mode: 'overwrite'
Type: string

sourceId​

Specify source id
How to use:
sourceId: 'target_id'
Type: string

Stored data

​

<input
    id="billing_free_warranty"
    name="billing"
    type="radio"
    value="Free repair"
    data-hf-control="RadioBox"
    data-hf-options="{ 
        label: 'Free / warranty repair'
    }"
/>

<input
    id="billing_invoice"
    name="billing"
    type="radio"
    value="Invoice"
    data-hf-control="RadioBox"
    data-hf-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 and the selected Radio Button will be stored.