Statamic Livewire Filters
Statamic Livewire Filters

Basic example

This basic example demonstrates filtering a collection using three components: an LfTextFilter to filter by the title Text field, an LfCheckboxFilter for the 'car_brand' Taxonomy field, and an LfRadioFilter for the 'transmission' Select field. It uses the default pagination component.

Title search
Car brand
Transmission
Audi A3 Cabrio
Audi A3 Cabrio
Seats: 4
Doors: 2
Transmission: Manual
Fuel: Unleaded
Audi Q3 Turbo Diesel
Audi Q3 Turbo Diesel
Seats: 5
Doors: 5
Transmission: Manual
Fuel: Diesel
Citroen C4 Grand Picasso Automatic
Citroen C4 Grand Picasso Automatic
Seats: 7
Doors: 5
Transmission: Automatic
Fuel: Diesel
Citroen SpaceTourer Automatic
Citroen SpaceTourer Automatic
Seats: 7
Doors: 5
Transmission: Automatic
Fuel: Diesel
Fiat 500 Cabrio Automatic
Fiat 500 Cabrio Automatic
Seats: 2
Doors: 2
Transmission: Automatic
Fuel: Unleaded
Fiat Panda
Fiat Panda
Seats: 4
Doors: 4
Transmission: Manual
Fuel: Unleaded

Example's code

        
        <div class="my-8 xl:my-12 not-prose">
    <div class="flex">
        <div class="w-1/3 pr-8">
            <div class="mb-8">
                <div class="mb-2 font-bold">
                    Title search
                </div>
                {{ livewire:lf-text-filter
                    blueprint="cars.car"
                    field="title"
                    condition="contains"
                }}
            </div>
            <div class="mb-8">
                <div class="mb-2 font-bold">
                    Car brand
                </div>
                {{ livewire:lf-checkbox-filter
                    blueprint="cars.car"
                    field="car_brand"
                    condition="taxonomy"
                }}
            </div>
            <div class="mb-8">
                <div class="mb-2 font-bold">
                    Transmission
                </div>
                {{ livewire:lf-radio-filter
                    blueprint="cars.car"
                    field="transmission"
                    condition="is"
                }}
            </div>
        </div>
       <div class="w-2/3">
            <div class="mb-4">
                {{ livewire:lf-tags blueprint="cars.car" fields="title|car_brand|transmission" }}
            </div>
            <div>
                {{ livewire-collection:cars paginate="6" }}
            </div>            
        </div>
    </div>
</div>