{{#if this.visible}}
    <div class="flex items-center {{@wrapperClass}}" {{did-update this.onChange @isToggled @disabled}}>
        <span
            role="checkbox"
            tabindex="0"
            aria-checked="false"
            class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 cursor-pointer group focus:outline-none {{if this.disabled 'opacity-50'}}"
            data-disabled={{this.disabled}}
            ...attributes
            {{on "click" (fn this.toggle this.isToggled)}}
        >
            <span
                aria-hidden="true"
                class="{{if this.isToggled this.activeColorClass ' bg-gray-200'}} absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200"
            ></span>
            <span
                aria-hidden="true"
                class="{{if @isToggled ' translate-x-5' 'translate-x-0'}}
                    absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline group-focus:border-blue-300 transition-transform ease-in-out duration-200"
            ></span>
        </span>
        <div class="flex items-center">
            {{yield}}
            {{#if @label}}
                <span class="ml-2 text-sm dark:text-gray-100 {{@labelClass}}">{{@label}}</span>
            {{/if}}
            {{#if this.disabledByPermission}}
                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
                    <InputInfo @text={{t "common.unauthorized"}} />
                </Attach::Tooltip>
            {{else if @helpText}}
                <div class={{if @label "ml-2"}}>
                    <FaIcon @icon={{or @icon "info-circle"}} @size="xs" class="text-gray-300 dark:text-gray-100 text-xs {{@iconClass}}" />
                    <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "right"}}>
                        <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
                    </Attach::Tooltip>
                </div>
            {{/if}}
        </div>
    </div>
{{/if}}