My blade component show-on-check seems to have an error with alpine.js. It uses a custom checkbox-input with a label. Input and label are clickable.

Component show-on-check:

@props([
    'label',
    'name',
])

@php
    $show = old('show_content_'.$name);
@endphp

<div x-data="{ show: {{ $show ? 'true' : 'false' }} }" class="mb-3">
    <x-input.checkbox name="show_content_{{$name}}" x-model="show" :label="$label"/>
    <div x-show="show" class="border border-gray-300 p-3">
        {{ $slot }}
    </div>
</div>

show-on-check is then used in another component show-dns-entries which is used and rendered multiple times on my page:

Component show-dns-entries:

<div>
    @if (count($childrenIps))
        <x-show-on-check label="rDNS-Einträge anzeigen" name="rdns">
            <ul>
                @foreach($childrenIps as $childIp)
                    <li>
                        {{ $childIp->dns_name }} ({{ $childIp->address }})
                    </li>
                @endforeach
            </ul>
        </x-show-on-check>
    @else
        <x-typo.muted-xs>Keine DNS-Einträge</x-typo.muted-xs>
    @endif
</div>

The show functionality of alpine works fine if I click the check-box-input directly, but if I click the label of show-on-check instead of the checkbox-input, it always triggers show for the first show-on-check and not the one I actually clicked.

This is the code of the <x-input.checkbox> component I use inside the show-on-check component:

@props([
    'name',
    'label' => null,
    'checked' => false,
    'class' => '',
    'wrapperClass' => 'mb-3'
])
@php($i18nName = I18n::arrayToDotNotation($name ?? ''))

<div class="{{ $wrapperClass }}">
    <input type="checkbox" {{ $attributes }} id="{{ $name }}" name="{{ $name }}" @checked(old($i18nName) ?? $checked) class="{{$class}} rounded border-gray-400 text-primary shadow-sm focus:ring-0">
    @if($label)
        <label for="{{ $name }}" class="text-s text-gray-600">{{ $label }}</label>
    @endif
    @if($errors->has($i18nName))
        <div class="text-red-500 text-xs">{{ $errors->first($i18nName) }}</div>
    @endif
</div>

I tried to add @click.stop to the label, but that did nothing. I can use @click.prevent of course, but I would prefer the label to remain clickable.

Please let me know if you need more info.