Portal UI

Checkbox

A control that allows the user to toggle between checked and not checked.

<div class="flex flex-col items-start space-x-3">
    <x-portal::checkbox id="push" label="Push notifications" checked value="push" name="notif[]" />
    <x-portal::checkbox id="email" label="Email" value="email" name="notif[]" />
    <x-portal::checkbox id="term2" label="Disabled" value="term2" name="notif[]" disabled />
    <x-portal::checkbox id="app" label="In-app alerts" value="app" name="notif[]" />
    <x-portal::checkbox id="sms" label="SMS" value="sms" name="notif[]" />
</div>

Publishing Component

If you want to customize the components, you can publish them by running the following command :

php artisan vendor:publish --tag=portal-ui:checkbox --force


With Description

<div class="flex gap-3 flex-col">
    <x-portal::checkbox 
        id="newsletter" 
        value="newsletter" 
        name="desc[]" 
        label="Newsletter"
        description="Receive our monthly newsletter with the latest updates and offers." 
    />
    <x-portal::checkbox 
        id="updates" 
        value="updates" 
        name="desc[]" 
        label="Product updates"
        description="Stay informed about new features and product updates." 
    />
    <x-portal::checkbox 
        id="invitations" 
        value="invitations" 
        name="desc[]" 
        label="Event invitations"
        description="Get invitations to our exclusive events and webinars." 
    />
</div>


Group

<x-portal::checkbox.group label="Subscription preferences" class="flex-col">
    <x-portal::checkbox 
        id="newsletter_group" 
        value="newsletter" 
        name="group[]" 
        label="Newsletter"
        description="Receive our monthly newsletter with the latest updates and offers." 
    />
    <x-portal::checkbox 
        id="updates_group" 
        value="updates" 
        name="group[]" 
        label="Product updates"
        description="Stay informed about new features and product updates." 
    />
    <x-portal::checkbox 
        id="invitations_group" 
        value="invitations" 
        name="group[]" 
        label="Event invitations"
        description="Get invitations to our exclusive events and webinars." 
    />
</x-portal::checkbox.group>