Select Boxes Components

Usage

       @livewire('select2-multiple')
    

Documentation

To use the select2 plugin, make sure you include its CSS and JS library in your project.

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>   

The javascript code is straightforward. We initialize the select2 box on the taskSelect input, and on the change event, we call the set event of livewire which sets the desired input field with the value of the select2 box.

Make sure you mark your select box with wire:ignore directive, this will make sure livewire does not repaint the input on reload, since we don't want to lose select2 classes and selected values.

Usage

      @livewire('country-state-select')
    

Documentation

This component demonstrates Livewire's reactivity by using Lifecycle hooks to achieve the dependent dropdown functionality.

An array of Countries are stored in the $countries variables, and whenever the country value changes, we use that data to get all the $states belonging to that Country