Toggle Switches Components

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.

Usage

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

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.