Button

Button Style

Use button style utility to quickly style checkboxes like buttons.

button style

<div class="r1 c1 hf-button-style">
    <input
        id="doku-check1"
        type="checkbox"
        value="value"
        data-win-control="HFWinJSCtrl.CheckBox"
        data-win-options="{ label: 'Test Checkbox' }"
    />
</div>
<div class="r1 c1 hf-button-style hover">
    <input
        id="doku-check2"
        type="checkbox"
        value="value"
        data-win-control="HFWinJSCtrl.CheckBox"
        data-win-options="{ label: 'Test Checkbox Hover' }"
    />
</div>
<div class="r1 c1 hf-button-style disabled">
    <input
        id="doku-check3"
        type="checkbox"
        value="value"
        data-win-control="HFWinJSCtrl.CheckBox"
        data-win-options="{ label: 'Test Checkbox Disabled', disabled: true }"
    />
</div>

Button Inline

Use button inline utility to quickly place a small button inline with a TextField under a label.

button inline

<div class="r1 c1 hf-button-inline">
    <input
        type="text"
        id="doku_input"
        data-win-control="HFWinJSCtrl.TextField"
        data-win-options="{
            label: 'Test Button Inline'
        }"
    />
    <div
        id="doku_reverseGeolocator"
        class="pdf-hide"
        data-win-control="HFWinJSCtrl.ReverseGeolocatorButton"
        data-win-options="{
            buttonType: 'small',
            targetFields: {
                'address_zip_code':'postal_code', 
                'address_city': 'locality', 
                'address_street_and_no':'route + street_number' 
            },
            typesSeperator: ', '
        }"
    ></div>
</div>

FormControl with error text has to be wrapped in a hf-button-inline-input container to work properly.

button inline with validation

<div class="r1 c1 hf-button-inline">
    <div
        id="email_label"
        data-win-control="HFWinJSCtrl.Label"
        data-win-options="{
            label: 'E-mail address',
        }"
    ></div>
    <div class="hf-button-inline-input">
        <input
            type="email"
            placeholder="name@domain.com"
            id="gastro_patient_email"
            data-win-control="HFWinJSCtrl.TextField"
            data-win-options="{
                validator: {
                    type: 'email',
                    errorText: 'The entered e-mail address is invalid.'
                }
            }"
        />
    </div>
    <div
        id="mailButton_gastro_patient"
        class="pdf-hide"
        data-win-control="HFWinJSCtrl.MailButton"
        data-win-options="{
            mailId: 'gastro_patient_email',
            mailSubject: '[HybridForms]%20Demo%20-%20Info-Mail',
            buttonLabel: 'Open mail',
            buttonType: 'small',
            buttonHeading: 'Mail',
        }"
    ></div>
</div>