Spectre Filters

Last Updated : 26 Jul, 2022

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/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/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:

Spectre Filters

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/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/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>