List Filter
Built for

Active Class

Learn how to style the active state of filters when they are selected.

Check more examples
Active Class
example 01
required

Filter Required Minimum setup

example 02

Filter complete setup with all form elements and dynamic content

example 03

Filter complete setup with all form elements and static content

example 04

Filter using checkboxes and active class

example 05

Filter using radio buttons and filter "All"

example 06

Filter Advanced setup with conditional fields

The elements outlined in blue have the necessary attributes for this solution. Toggle X-ray by pressing ? on your keyboard and hover the outlined elements to reveal their attributes.
This is a demo project with data generated by AI
Featured
Filter by make
This is a block containing a checkbox with the 'active' class. The 'active' class will be added to the button when it is clicked. You can hide this block if you want.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Raleigh
, 
NC
Esvuerini
Make:
Quasar
Color:
Yellow
Year:
2017
true
$
77,935
Allentown
, 
PA
Legzalezza
Make:
Stream
Color:
Yellow
Year:
2021
false
$
160,160
Dallas
, 
TX
Venlante
Make:
Stream
Color:
Red
Year:
2019
false
$
6,601
Columbus
, 
OH
Esquotini
Make:
Pulse
Color:
Red
Year:
2018
false
$
55,599
Miami
, 
FL
Giajoallo
Make:
Aether
Color:
Yellow
Year:
2021
false
$
68,675
Detroit
, 
MI
Corceerini
Make:
Pulse
Color:
Purple
Year:
2024
false
$
95,700
Savannah
, 
GA
Solgurano
Make:
Stream
Color:
Blue
Year:
2023
false
$
76,673
Grand Rapids
, 
MI
Priquoallo
Make:
Vortex
Color:
Orange
Year:
2024
false
$
12,479
Austin
, 
TX
Gialante
Make:
Celer
Color:
Cream
Year:
2023
false
$
21,182
San Francisco
, 
CA
Notralezza
Make:
Vortex
Color:
Black
Year:
2020
false
$
71,026
Columbus
, 
OH
Belkoallo
Make:
Glimmer
Color:
Blue
Year:
2023
true
$
145,329
Los Angeles
, 
CA
Lulovetta
Make:
Electra
Color:
Gray
Year:
2019
false
$
127,970
Charlotte
, 
NC
Alfonano
Make:
Glimmer
Color:
Red
Year:
2020
false
$
16,304
Columbus
, 
OH
Viallo
Make:
Aether
Color:
Red
Year:
2024
false
$
59,625
San Francisco
, 
CA
Vennaerini
Make:
Ampere
Color:
Cream
Year:
2019
false
$
90,653
Orlando
, 
FL
Clahevetta
Make:
Zenith
Color:
Gray
Year:
2024
false
$
42,870
Raleigh
, 
NC
Siminano
Make:
Verde
Color:
Black
Year:
2024
false
$
63,136
Naperville
, 
IL
Eslitella
Make:
Fulgor
Color:
Cream
Year:
2020
false
$
31,204
Tampa
, 
FL
Vitioero
Make:
Electra
Color:
White
Year:
2020
false
$
168,099
Raleigh
, 
NC
Altte
Make:
Nimbus
Color:
Purple
Year:
2023
false
$
80,452
Philadelphia
, 
PA
Leglirano
Make:
Celer
Color:
White
Year:
2022
false
$
88,755
Austin
, 
TX
Ludinano
Make:
Ampere
Color:
Blue
Year:
2019
false
$
149,269
Buffalo
, 
NY
Monjooero
Make:
Zenith
Color:
Cream
Year:
2018
false
$
99,370
Chicago
, 
IL
Monnano
Make:
Zenith
Color:
Black
Year:
2020
false
$
75,798