Categories

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

Toggle Switches Components

Jump to:

Dark Mode Toggle

Elegant dark mode toggle switch with smooth transitions and persistent preference storage. Automatically syncs with system preferences and saves user choice to localStorage.

UI Stack: Tailwind CSS

Appearance

Code

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

Overview

Elegant dark mode toggle switch with smooth transitions and persistent preference storage. Automatically syncs with system preferences and saves user choice to localStorage.

Installation

Copy the component class to your app/Livewire directory.

Copy the Blade view to your resources/views/livewire directory.

Usage

Include the component in your Blade template:

<livewire:dark-mode-toggle />

Pro Tip

This component uses Tailwind CSS with the tw- prefix. Make sure your Tailwind configuration includes this prefix or remove it from the classes.

Simple Livewire toggle switch

Alters boolean field on the database using livewire toggle switch

UI Stack: Bootstrap 5, Livewire

Name Email Active
Natasha Schuster mya.berge@example.org
Dr. Yvette Aufderhar MD pschuster@example.org
Lue Gleichner Jr. kari.mclaughlin@example.com
Caroline Runolfsdottir lemuel.spencer@example.com
Tavares Raynor americo21@example.com
Linda Halvorson frieda52@example.org
Isabelle O'Connell vbode@example.org
Brenna Beer boyle.jordy@example.org
Gladys Beer ajaskolski@example.com
Prof. Claudia Corkery erich.daugherty@example.com

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, Alpine JS, Livewire

Name Email Active
Natasha Schuster mya.berge@example.org
Dr. Yvette Aufderhar MD pschuster@example.org
Lue Gleichner Jr. kari.mclaughlin@example.com
Caroline Runolfsdottir lemuel.spencer@example.com
Tavares Raynor americo21@example.com
Linda Halvorson frieda52@example.org
Isabelle O'Connell vbode@example.org
Brenna Beer boyle.jordy@example.org
Gladys Beer ajaskolski@example.com
Prof. Claudia Corkery erich.daugherty@example.com

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, New, Livewire

Name Email Active
Natasha Schuster mya.berge@example.org
Dr. Yvette Aufderhar MD pschuster@example.org
Lue Gleichner Jr. kari.mclaughlin@example.com
Caroline Runolfsdottir lemuel.spencer@example.com
Tavares Raynor americo21@example.com
Linda Halvorson frieda52@example.org
Isabelle O'Connell vbode@example.org
Brenna Beer boyle.jordy@example.org
Gladys Beer ajaskolski@example.com
Prof. Claudia Corkery erich.daugherty@example.com

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.

Components on this page

4 components