Skip to main content
Version: Upcoming 🦄

Switch

The Switch control is a simple control element that can be used to toggle between two states. It is a good choice for binary decisions, like turning something on or off.

<div
    id="switch_control"
    data-hf-control="Switch"
    data-hf-options="{ 
        label: 'Switch', 
        messages: {
            checked: 'On', 
            unchecked: 'OFF'
        }
    }"
></div>

FormControl Options​

defaultValue​

Set the defaultValue to "true" to display the Switch as checked by default. A Custom Code function can be used to set defaultValue.
How to use:
defaultValue: true
Type: boolean | function
Signature: function() => 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

label​

Define a label for your control element.
How to use:
label: 'Switch'
Type: string

required​

Set "true" if the control has to be filled in.
How to use:
required: true
Type: boolean

tooltip​

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.
How to use:
tooltip: 'Please indicate
at least one cause of damage.'
Type: string

tooltipTemplate​

Write an ID of an HTML container 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 content of the container will occur.
How to use:
tooltipTemplate: 'example_control_tooltip'
Type: string

Stored data

​

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

One for the checked switch...

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

...one for the unchecked switch...

{
    "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.