Button

Use button utilities to quickly style buttons in HybridForms Forms.

Button Colors

Use FormButton color classes to style them in different colors. You can set the button to have default, primary, warning, or error styles.

Default Button

Primary Button

Primary style: class="hf-formbutton-primary".

<div class="grid column3">
    <div class="r1 c1">
        <div id="pri_small"
            class="hf-formbutton-primary"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'small',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c2">
        <div id="pri_medium"
            class="hf-formbutton-primary"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'medium',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c3">
        <div id="pri_large"
            class="hf-formbutton-primary"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'large',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
</div>

Warning Button

Warning style: class="hf-formbutton-warning".

<div class="grid column3">
    <div class="r1 c1">
        <div id="war_small"
            class="hf-formbutton-warning"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'small',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c2">
        <div id="war_medium"
            class="hf-formbutton-warning"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'medium',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c3">
        <div id="war_large"
            class="hf-formbutton-warning"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'large',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
</div>

Error Button

Error style: class="hf-formbutton-error".

<div class="grid column3">
    <div class="r1 c1">
        <div id="err_small"
            class="hf-formbutton-error"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'small',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c2">
        <div id="err_medium"
            class="hf-formbutton-error"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'medium',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
    <div class="r1 c3">
        <div id="err_large"
            class="hf-formbutton-error"
            data-hf-control="ButtonControl"
            data-hf-options="{
                buttonType: 'large',
                buttonLabel: 'test',
                buttonHeading: 'test',
            }"
        ></div>
    </div>
</div>

CheckBox as a Button style

Use button style utility to quickly style CheckBoxes like buttons.

<div class="r1 c1 hf-button-style">
    <input id="doku-check1"
        type="checkbox"
        value="value"
        data-hf-control="CheckBox"
        data-hf-options="{ label: 'Test Checkbox' }"
    />
</div>

<div class="r1 c1 hf-button-style hover">
    <input id="doku-check2"
        type="checkbox"
        value="value"
        data-hf-control="CheckBox"
        data-hf-options="{ label: 'Test Checkbox Hover' }"
    />
</div>

<div class="r1 c1 hf-button-style disabled">
    <input id="doku-check3"
        type="checkbox"
        value="value"
        data-hf-control="CheckBox"
        data-hf-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.

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

Button Inline with validator

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

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