8194460 Toggle Switches - Laravel Livewire Components - LivewireDemos

Categories

Accordions Alerts Avatars Buttons Calendar Charts Chat GPT Color Pickers Comments Confirm Dialogs Data Tables Date Pickers Drop Downs Ecommerce Email File Uploaders Form Wizards Forms Miscellaneous Modals Notifications Rich Text Editors Search Boxes Select Boxes Slide Panels Tags Toast Toggle Switches Tooltips

Toggle Switches Components

Simple Livewire toggle switch

Alters boolean field on the database using livewire toggle switch

UI Stack: Bootstrap 5

Name Email Active
Magnus Feil DDS laron.walter@example.org
Sally Leuschke DDS flossie49@example.net
Prof. Rene Sanford II jones.daphne@example.org
Prof. Marquis Zulauf II laisha18@example.com
Flossie Goodwin ybrekke@example.net
Mr. Mustafa Lockman augustine80@example.org
Dr. Kacey Ullrich III djohns@example.com
Dr. Lula Kautzer smith.clarissa@example.com
Mr. Alvah Rempel Sr. ward.winston@example.com
Caroline Hickle xkohler@example.net

Code
Download

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Usage 


      @livewire('toggle-switch', [
                'model' => $user,
                'field' => 'active'
                ]);

Documentation

This is a toggle-switch livewire component using bootstrap-5 which alters the boolean field in the database.

This is a reusable component and accepts two fields when you initialize the component Model for which you want to alter the database field and the database field name.

When the user alters the toggle switch on the front end it triggers the updating lifecycle event of the component and it changes the boolean value in the database.

Livewire - Tailwind Toggle Switch

Reusable toggle switch using Laravel Livewire and TailwindCSS

UI Stack: Tailwind CSS

Name Email Active
Magnus Feil DDS laron.walter@example.org
Sally Leuschke DDS flossie49@example.net
Prof. Rene Sanford II jones.daphne@example.org
Prof. Marquis Zulauf II laisha18@example.com
Flossie Goodwin ybrekke@example.net
Mr. Mustafa Lockman augustine80@example.org
Dr. Kacey Ullrich III djohns@example.com
Dr. Lula Kautzer smith.clarissa@example.com
Mr. Alvah Rempel Sr. ward.winston@example.com
Caroline Hickle xkohler@example.net

Code
Please login to View/Download the Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Usage 


      @livewire(
    'toggle-switch',
    [
        'model' => $User,
        'field' => 'isActive',
    ],
    key($User->id),
)

Livewire Toggle switch with alert notification

Livewire toggle switch along with toast alert notification.

UI Stack: Bootstrap 5

Name Email Active
Magnus Feil DDS laron.walter@example.org
Sally Leuschke DDS flossie49@example.net
Prof. Rene Sanford II jones.daphne@example.org
Prof. Marquis Zulauf II laisha18@example.com
Flossie Goodwin ybrekke@example.net
Mr. Mustafa Lockman augustine80@example.org
Dr. Kacey Ullrich III djohns@example.com
Dr. Lula Kautzer smith.clarissa@example.com
Mr. Alvah Rempel Sr. ward.winston@example.com
Caroline Hickle xkohler@example.net

Code
Please login to View/Download the Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Usage 


      @livewire('toggle-switch-alert', [
                        'model' => $dummyUser,
                        'field' => 'isActive',
                        'status' => [
                            'off' => "User {$dummyUser->name} is disabled",
                            'on' => "User {$dummyUser->name} is enabled"
                        ]
                    ])

Documentation

This component is an extention of Simple Toggle Switch Component

This is a toggle-switch with an alert livewire component using bootstrap-5 which alters the boolean field in the database and also shows an alert notification to the user.

For the alerts, we have done a simple integration with Notyf javascript plugin. You can read more about Livewire Notyf Integration.