This is the most basic example of what you can achieve with Livewire Filters in just a few minutes. Here, we are filtering a collection using four components:
An LfTextFilter to filter by the Title text field
An LfCheckboxFilter for the Car Brand taxonomy field
An LfRadioFilter for the Transmission select field
And an LfSelectFilter for the Fuel Type select field
It also uses the Tag component and the default pagination component.
Showing entries
Search by name
Car brand
Transmission
Fuel type
Registration date after
Audi A3 Cabrio
Seats:
4
Doors:
2
Transmission:
Manual
Fuel:
Unleaded
Model year:
2020
Audi Q3 Turbo Diesel
Seats:
5
Doors:
5
Transmission:
Manual
Fuel:
Diesel
Model year:
2022
Citroen C4 Grand Picasso Automatic
Seats:
7
Doors:
5
Transmission:
Automatic
Fuel:
Diesel
Model year:
2022
Citroen SpaceTourer Automatic
Seats:
7
Doors:
5
Transmission:
Automatic
Fuel:
Diesel
Model year:
2021
Fiat 500 Cabrio Automatic
Seats:
2
Doors:
2
Transmission:
Automatic
Fuel:
Unleaded
Model year:
2021
Fiat Panda
Seats:
4
Doors:
4
Transmission:
Manual
Fuel:
Unleaded
Model year:
2023
Hyundai i10
Seats:
4
Doors:
4
Transmission:
Manual
Fuel:
Diesel
Model year:
2023
Hyundai i10 Automatic
Seats:
4
Doors:
4
Transmission:
Automatic
Fuel:
Unleaded
Model year:
2021
Hyundai i20
Seats:
5
Doors:
4
Transmission:
Manual
Fuel:
Unleaded
Model year:
2021
Example's code
1<div class="my-8 xl:my-12" id="livewire-collection">
2 <div class="grid grid-cols-12 gap-8 lg:gap-12 xl:gap-16">
3 <div class="col-span-3">
4 <div class="mb-8">
5 <div class="mb-2 font-bold">
6 Search by name
7 </div>
8 {{ livewire:lf-text-filter
9 blueprint="cars.car"
10 field="title"
11 condition="contains"
12 }}
13 </div>
14 <div class="mb-8">
15 <div class="mb-2 font-bold">
16 Car brand
17 </div>
18 {{ livewire:lf-checkbox-filter
19 blueprint="cars.car"
20 field="car_brand"
21 condition="taxonomy"
22 }}
23 </div>
24 <div class="mb-8">
25 <div class="mb-2 font-bold">
26 Transmission
27 </div>
28 {{ livewire:lf-radio-filter
29 blueprint="cars.car"
30 field="transmission"
31 condition="is"
32 }}
33 </div>
34 <div class="mb-8">
35 <div class="mb-2 font-bold">
36 Fuel type
37 </div>
38 {{ livewire:lf-select-filter
39 blueprint="cars.car"
40 field="fuel_type"
41 condition="is"
42 }}
43 </div>
44 </div>
45 <div class="col-span-9">
46 <div class="mb-4">
47 {{ livewire:lf-tags blueprint="cars.car" fields="title|car_brand|transmission|fuel_type" }}
48 </div>
49 <div>
50 {{ livewire-collection:cars paginate="9" scrollTo="#livewire-collection" }}
51 </div>
52 </div>
53 </div>
54</div>