Spectre Filters

Spectre filters are useful if we want to create any database and search for particular data. In spectre, we have filter class to create a visual effect. We can create two types of filtration, one is a radio type, and another one is a checkbox type.

Spectre Filters Classes:

filter: This class is used to create a template for filtration.
filter-tag: This class is used to create the tag effect on filter elements.
filter-nav: This class is used to make the filtration responsive.

Syntax:

<div class="filter">
    <input type="radio" id="tag-0" 
    class="filter-tag" name="filter-radio">
    <div class="filter-nav">...</div>
</div>

Example 1: In this example, we will a filter that can select only one option, which means only one category will be filtered.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Filters</strong>
        <br><br>
        <div class="filter">
            <input type="radio" id="tag-0" 
                   class="filter-tag" name="filter-radio"
                   hidden checked>
            <input type="radio" id="tag-1" class="filter-tag"
                   name="filter-radio" hidden>
            <input type="radio" id="tag-2" class="filter-tag"
                   name="filter-radio" hidden>
        
            <div class="filter-nav">
                <label class="chip" for="tag-0">
                    Front-End
                </label>
                <label class="chip" for="tag-1">
                    Back-End
                </label>
                <label class="chip" for="tag-2">
                    Full Stack
                </label>
            </div>
        </div>
    </center>
</body>
</html>

Output:

Example 2: In this example, we will a filter that can select only multiple options, which means multiple categories will be filtered.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Filters</strong>
        <br><br>
        <div class="filter">
            <input type="checkbox" id="tag-0" 
                   class="filter-tag" name="filter-checkbox"
                   hidden checked>
            <input type="checkbox" id="tag-1"
                   class="filter-tag" name="filter-checkbox"
                   hidden>
            <input type="checkbox" id="tag-2"
                   class="filter-tag" name="filter-checkbox"
                   hidden>
            <div class="filter-nav">
                <label class="chip" for="tag-0">
                    Front-End
                </label>
                <label class="chip" for="tag-1">
                    Back-End
                </label>
                <label class="chip" for="tag-2">
                    Full Stack
                </label>
            </div>
        </div>
    </center>
</body>
</html>

Output:

Reference Link: https://picturepan2.github.io/spectre/experimentals/filters.html

Explore