Checkbox

<div class="flex items-center space-x-2">
    <x-checkbox id="terms" />
    <x-label
        htmlFor="terms"
        class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
    >
        Accept terms and conditions
    </x-label>
</div>

<div class="items-top flex space-x-2">
    <x-checkbox id="terms1" />
    <div class="grid gap-1.5 leading-none">
        <x-label
            htmlFor="terms1"
            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        >
            Accept terms and conditions
        </x-label>
        <p class="text-sm text-muted-foreground">
            You agree to our Terms of Service and Privacy Policy.
        </p>
    </div>
</div>

<div class="flex items-center space-x-2">
    <x-checkbox
        id="terms2"
        disabled
    />
    <x-label
        htmlFor="terms2"
        class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
    >
        Accept terms and conditions
    </x-label>
</div>

<x-form>
    <x-form.item>
        <div class="flex flex-row items-start p-4 space-x-3 space-y-0 border rounded-md shadow">
            <x-checkbox
                x-form:control
                checked
                value="mobile-notifications"
            />
            <div class="space-y-1 leading-none">
                <x-form.label>
                    Use different settings for my mobile devices
                </x-form.label>
                <x-form.description>
                    You can manage your mobile notifications in the
                    <x-link href="/examples/forms">mobile settings</x-link> page.
                </x-form.description>
            </div>
        </div>
    </x-form.item>
    <x-button type="submit">Submit</x-button>
</x-form>

@php
    $items = [
        (object) [
            'id' => 'recents',
            'label' => 'Recents',
        ],
        (object) [
            'id' => 'home',
            'label' => 'Home',
        ],
        (object) [
            'id' => 'applications',
            'label' => 'Applications',
        ],
        (object) [
            'id' => 'desktop',
            'label' => 'Desktop',
        ],
        (object) [
            'id' => 'downloads',
            'label' => 'Downloads',
        ],
        (object) [
            'id' => 'documents',
            'label' => 'Documents',
        ],
    ];
@endphp
 
<x-form>
    <x-form.item name="sidebar">
        @foreach ($items as $item)
            <x-form.item class="flex flex-row items-center space-x-3 space-y-0">
                <x-checkbox
                    x-form:control
                    value="{{ $item->id }}"
                    name="sidebar"
                />
                <x-form.label class="text-sm font-normal">
                    {{ $item->label }}
                </x-form.label>
            </x-form.item>
        @endforeach
    </x-form.item>
    <x-button type="submit">Submit</x-button>
</x-form>