In some situations, we will modify the CSS to affect all components by using clientlib-author-dialog in the clientlibs folder. For reference on using clientlibs for specific components, see this guide on including client libraries in AEM components and this guide on adding client libraries in AEM components. You can use the sample implementation provided below as a reference.

» Assuming we have project folder named `flagtick`, the following structure represents typical setup for client libraries in an AEM project.

ui.apps
└── src
    └── main
        └── content
            └── jcr_root
                └── apps
                    └── flagtick
                        └── clientlibs
                            └── clientlib-author-dialog
                                ├── js
                                │   └── checkboxshowhide.js
                                ├── .content.xml
                                └── js.txt

» js.txt

#base=js
checkboxshowhide.js

» .content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[cq.authoring.dialog.all,coralui3]"/>

Note: cq.authoring.dialog is a global category and applies to all Touch UI dialogs.

» checkboxshowhide.js

(function (document, $) {
    "use strict";
    $(document).on("foundation-contentloaded", function (e) {
        checkboxShowHideHandler($(".cq-dialog-checkbox-showhide", e.target));
    });
    $(document).on("change", ".cq-dialog-checkbox-showhide", function (e) {
        checkboxShowHideHandler($(this));
    });
    function checkboxShowHideHandler(el) {
        el.each(function (i, element) {
            if($(element).is("coral-checkbox")) {
                Coral.commons.ready(element, function (component) {
                    showHide(component, element);
                    component.on("change", function () {
                        showHide(component, element);
                    });
                });
            } else {
                var component = $(element).data("checkbox");
                if (component) {
                    showHide(component, element);
                }
            }
        })
    }
    function showHide(component, element) {
        var target = $(element).data("cqDialogCheckboxShowhideTarget");
        var $target = $(target);
        if (target) {
            $target.addClass("hide");
            if (component.checked) {
                $target.removeClass("hide");
            }
        }
    }
})(document, Granite.$);

» cq:dialog

<title
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="Service Credit Label"
        value="Title"
        name="./title"/>
<chkTitle jcr:primaryType="nt:unstructured"
           sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
           granite:class="cq-dialog-checkbox-showhide"
           text="Enable Title Tooltip"
           value="{Boolean}true"
           uncheckedValue="{Boolean}false"
           name="./chkTitle">
    <granite:data jcr:primaryType="nt:unstructured"
                  cq-dialog-checkbox-showhide-target=".title-showhide-target" />
</chkTitle>
<ttTitle
        jcr:primaryType="nt:unstructured"
        granite:class="title-showhide-target"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="Service Credit Tooltip"
        name="./ttServiceCredit">
    <granite:data jcr:primaryType="nt:unstructured" showhidetargetvalue="true" />
</ttTitle>

» Wrap Label

<chkTitle jcr:primaryType="nt:unstructured"
           sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
           granite:class="cq-dialog-checkbox-showhide"
           text="Enable Title Tooltip"
           value="{Boolean}true"
           uncheckedValue="{Boolean}false"
           name="./chkTitle">
    <granite:data jcr:primaryType="nt:unstructured"
                  cq-dialog-checkbox-showhide-target=".title-showhide-target" />
</chkTitle>
<containerTitle
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/container"
    granite:class="title-showhide-target">
    <items jcr:primaryType="nt:unstructured">
        <ttTitle
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                fieldLabel="Title Tooltip"
                name="./ttTitle">
        </ttTitle>
    </items>
    <granite:data jcr:primaryType="nt:unstructured" showhidetargetvalue="true" />
</containerTitle>