<div class="relative flex items-{{or @alignItems 'start'}} {{if @disabled 'disabled opacity-75'}}" ...attributes>
    <div class="flex items-center h-4">
        <Input
            @type="checkbox"
            id={{this.id}}
            data-value={{@value}}
            @checked={{@value}}
            data-checked={{@value}}
            disabled={{@disabled}}
            class="fleetbase-checkbox form-checkbox {{this.colorClass}} {{@inputClass}}"
            {{on "change" this.toggle}}
        />
        {{#if @helpText}}
            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
                <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
            </Attach::Tooltip>
        {{/if}}
    </div>
    {{#if (has-block)}}
        <div class="ml-2 text-sm leading-5">
            <label for={{this.id}} aria-disabled={{@disabled}} class="font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
                {{yield}}
            </label>
        </div>
    {{else if @label}}
        <div class="ml-2 text-sm leading-5">
            <label for={{this.id}} aria-disabled={{@disabled}} class="font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
                {{@label}}
            </label>
        </div>
    {{/if}}
</div>