Skip to main content
Version: Upcoming 🦄

Label

The Label control is used to create a HybridForms label element.

<div id="follow_up" 
    data-hf-control="Label" 
    data-hf-options="{ 
        label: 'Follow up' 
    }"></div>

FormControl Options​

fieldset​

Write down the ID's of those fields (i.e. a group of checkboxes or radioboxes) that belong to this label. Can be comma-separated list or complex array.
How to use:
requiredFields: 'repair_cover_glass_broken,repair_roll_counter_broken,...'
Type: string | IComplexRequiredFields[]

fieldsetWrap​

Set "true" if the fieldset should be wrapped in a fieldset element. Be aware that not every structure is working correctly.
How to use:
fieldsetWrap: true
Type: boolean
Default: false

hidden​

Hide FormControl in Form.
How to use:
hidden: true
Type: boolean

htmlFor​

Set the "for" attribute of the label element to a specific ID.
How to use:
htmlFor: 'control_id'
Type: string

label​

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

required​

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

requiredFieldsOp​

Define first level comparison operator of the requiredFields. Valid values are "and" or "or".
How to use:
requiredFieldsOp: 'and'
Type: 'and' | 'or'
Default: or

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

requiredFields​

Simple​

Example for comma-separated requiredFields in which all fields must be filled.

<div id="checkboxh_label" 
    data-hf-control="Label" 
    data-hf-options="{ 
        label: 'Checkbox (horizontal)',
        required: true,
        requiredFields: 'checkboxh1,checkboxh2,checkboxh3,checkboxh4,checkboxh5,checkboxh6,checkboxh7,checkboxh8',
        requiredFieldsOp: 'and',
        tooltip: 'Multiple choice'
    }"></div>

Complex​

Example for complex array validation.

<div id="checkboxv_label" 
    data-hf-control="Label" 
    data-hf-options="{ 
        label: 'Checkbox (vertikal)', 
        required: true, 
        requiredFields: [
            {
                op: 'and',
                fields: 'checkboxv1,checkboxv2'
            },
            {
                op: 'or',
                fields: 'checkboxv3,checkboxv4,checkboxv5'
            }
        ],
        requiredFieldsOp: 'and',
        tooltip: 'Multiple choice' 
    }"></div>
interface IComplexRequiredFields {
    op: 'and' | 'or';
    fields: string;
}

fields​

Write down the ID's of those fields (i.e. a group of checkboxes or radioboxes) belonging to this object as comma-separated list.
How to use:
fields: 'checkboxv1,checkboxv2'
Type: string

op​

Define second level comparison operator of the requiredFields. Valid values are "and" or "or".
How to use:
op: 'and'
Type: 'and' | 'or'
Default: or
Info

requiredFieldsOp concenates every object inside the array.