Portal UI

Switch

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

<div class="flex items-center space-x-2">
    <x-portal::switch id="airplane-mode" name="airplane_mode"/>
    <x-portal::label htmlFor="airplane-mode">Airplane Mode</x-portal::label>
</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:switch --force


Example

Email notifications

Receive emails about your account activity.

Receive emails about your account activity.

Receive emails about your account activity.

Receive emails about your account activity. 

<x-portal::heading size="lg">
    Email notifications
</x-portal::heading>
<div class="flex justify-between mt-3 items-center max-w-md border rounded-md p-3">
    <div>
        <x-portal::label>Communication emails</x-portal::label>
        <x-portal::form.description>Receive emails about your account activity.</x-portal::form.description>
    </div>
    <x-portal::switch />
</div>
<div class="flex justify-between mt-3 items-center max-w-md border rounded-md p-3">
    <div>
        <x-portal::label>Communication emails</x-portal::label>
        <x-portal::form.description>Receive emails about your account activity.</x-portal::form.description>
    </div>
    <x-portal::switch />
</div>
<div class="flex justify-between mt-3 items-center max-w-md border rounded-md p-3">
    <div>
        <x-portal::label>Communication emails</x-portal::label>
        <x-portal::form.description>Receive emails about your account activity.</x-portal::form.description>
    </div>
    <x-portal::switch />
</div>
<div class="flex justify-between mt-3 items-center max-w-md border rounded-md p-3">
    <div>
        <x-portal::label>Communication emails</x-portal::label>
        <x-portal::form.description>Receive emails about your account activity.</x-portal::form.description>
    </div>
    <x-portal::switch />
</div>