Filterable

filterable.js ;

Use the filterable module to create lists of filterable items.

Examples

Basic

results

Big Red Car

Small Red Car

Big Red Bike

Small Red Bike

Big Blue Car

Small Blue Car

Big Blue Bike

Small Blue Bike

Sorry, no results.

<div class="filterable-example js-filterable">
  <form class="filterable-example__filters">
    <div class="form__item">
      <label class="form__label">Search:</label>
      <input type="text" name="q" class="js-filterable__search">  
    </div>
    
    <div class="form__item js-filterable__checkbox-group" data-filterable-key="size">
      <label class="form__label">Filter By Size:</label>

      <label class="checkbox">
        <input class="checkbox__input js-filterable__checkbox" name="big" type="checkbox" required>
        <div class="checkbox__box">
          <div class="checkbox__icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" width="12" height="8">
              <title>Checkmark</title>
              <path fill="#fff" d="M4,8.3c-0.2,0-0.4-0.1-0.5-0.2L0.2,4.9c-0.3-0.3-0.3-0.8,0-1.1c0.3-0.3,0.8-0.3,1.1,0L4,6.5l6.4-6.3c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1L4.5,8.1C4.4,8.2,4.2,8.3,4,8.3z"/>
            </svg>      
          </div>
        </div>
        <span class="checkbox__label">Big</span>
      </label>
      
      <label class="checkbox">
        <input class="checkbox__input js-filterable__checkbox" name="small" type="checkbox" required>
        <div class="checkbox__box">
          <div class="checkbox__icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" width="12" height="8">
              <title>Checkmark</title>
              <path fill="#fff" d="M4,8.3c-0.2,0-0.4-0.1-0.5-0.2L0.2,4.9c-0.3-0.3-0.3-0.8,0-1.1c0.3-0.3,0.8-0.3,1.1,0L4,6.5l6.4-6.3c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1L4.5,8.1C4.4,8.2,4.2,8.3,4,8.3z"/>
            </svg>      
          </div>
        </div>
        <span class="checkbox__label">Small</span>
      </label>
    </div>

    <div class="form__item js-filterable__checkbox-group" data-filterable-key="material">
      <label class="form__label">Filter By Materials:</label>

      <label class="checkbox">
        <input class="checkbox__input js-filterable__checkbox" name="metal" type="checkbox" required>
        <div class="checkbox__box">
          <div class="checkbox__icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" width="12" height="8">
              <title>Checkmark</title>
              <path fill="#fff" d="M4,8.3c-0.2,0-0.4-0.1-0.5-0.2L0.2,4.9c-0.3-0.3-0.3-0.8,0-1.1c0.3-0.3,0.8-0.3,1.1,0L4,6.5l6.4-6.3c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1L4.5,8.1C4.4,8.2,4.2,8.3,4,8.3z"/>
            </svg>      
          </div>
        </div>
        <span class="checkbox__label">Metal</span>
      </label>

      <label class="checkbox">
        <input class="checkbox__input js-filterable__checkbox" name="glass" type="checkbox" required>
        <div class="checkbox__box">
          <div class="checkbox__icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" width="12" height="8">
              <title>Checkmark</title>
              <path fill="#fff" d="M4,8.3c-0.2,0-0.4-0.1-0.5-0.2L0.2,4.9c-0.3-0.3-0.3-0.8,0-1.1c0.3-0.3,0.8-0.3,1.1,0L4,6.5l6.4-6.3c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1L4.5,8.1C4.4,8.2,4.2,8.3,4,8.3z"/>
            </svg>      
          </div>
        </div>
        <span class="checkbox__label">Glass</span>
      </label>
    </div>

    <div class="form__item">
      <label class="form__label">Filter By Color:</label>

      <select class="js-select js-filterable__select" name="color">
        <option value="">Choose color...</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    </div>

    <div class="form__item">
      <label class="form__label">Filter By Vehicle:</label>

      <label class="radio">
        <input class="radio__input js-filterable__radio" name="vehicle" value="bike" type="radio" required>
        <span class="radio__icon"></span>
        <span class="radio__label">Bike</span>
      </label>

      <label class="radio">
        <input class="radio__input js-filterable__radio" name="vehicle" value="car" type="radio" required>
        <span class="radio__icon"></span>
        <span class="radio__label">Car</span>
      </label>
    </div>

    <button class="button js-filterable__update">Apply Filters</button>
    <button class="button button--outline js-filterable__clear">Clear All Filters</button>
  </form>

  <div class="filterable-example__some-results js-filterable__some-results">
    <div><span class="js-filterable__result-count"></span> results</div>
    <div class="row align-items-end">   
      <div class="col-12 col-md-3 filterable-example__item js-filterable__item" data-filterable-size="big" data-filterable-color="red" data-filterable-vehicle="car" data-filterable-material="metal glass">
        <div class="filterable-example__picture filterable-example__picture--red filterable-example__picture--big">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="#000000" d="M21.739 10.921c-1.347-.39-1.885-.538-3.552-.921 0 0-2.379-2.359-2.832-2.816-.568-.572-1.043-1.184-2.949-1.184h-7.894c-.511 0-.736.547-.07 1-.742.602-1.619 1.38-2.258 2.027-1.435 1.455-2.184 2.385-2.184 4.255 0 1.76 1.042 3.718 3.174 3.718h.01c.413 1.162 1.512 2 2.816 2 1.304 0 2.403-.838 2.816-2h6.367c.413 1.162 1.512 2 2.816 2s2.403-.838 2.816-2h.685c1.994 0 2.5-1.776 2.5-3.165 0-2.041-1.123-2.584-2.261-2.914zm-15.739 6.279c-.662 0-1.2-.538-1.2-1.2s.538-1.2 1.2-1.2 1.2.538 1.2 1.2-.538 1.2-1.2 1.2zm3.576-6.2c-1.071 0-3.5-.106-5.219-.75.578-.75.998-1.222 1.27-1.536.318-.368.873-.714 1.561-.714h2.388v3zm1-3h1.835c.882 0 1.428.493 2.022 1.105.452.466 1.732 1.895 1.732 1.895h-5.588v-3zm7.424 9.2c-.662 0-1.2-.538-1.2-1.2s.538-1.2 1.2-1.2 1.2.538 1.2 1.2-.538 1.2-1.2 1.2z"/>
</svg>
          <span class="js-filterable__search-target">Big Red Car</span>
        </div>
      </div>
      <div class="col-12 col-md-3 filterable-example__item js-filterable__item" data-filterable-size="small" data-filterable-color="red" data-filterable-vehicle="car" data-filterable-material="metal glass">
        <div class="filterable-example__picture filterable-example__picture--red filterable-example__picture--small">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="#000000" d="M21.739 10.921c-1.347-.39-1.885-.538-3.552-.921 0 0-2.379-2.359-2.832-2.816-.568-.572-1.043-1.184-2.949-1.184h-7.894c-.511 0-.736.547-.07 1-.742.602-1.619 1.38-2.258 2.027-1.435 1.455-2.184 2.385-2.184 4.255 0 1.76 1.042 3.718 3.174 3.718h.01c.413 1.162 1.512 2 2.816 2 1.304 0 2.403-.838 2.816-2h6.367c.413 1.162 1.512 2 2.816 2s2.403-.838 2.816-2h.685c1.994 0 2.5-1.776 2.5-3.165 0-2.041-1.123-2.584-2.261-2.914zm-15.739 6.279c-.662 0-1.2-.538-1.2-1.2s.538-1.2 1.2-1.2 1.2.538 1.2 1.2-.538 1.2-1.2 1.2zm3.576-6.2c-1.071 0-3.5-.106-5.219-.75.578-.75.998-1.222 1.27-1.536.318-.368.873-.714 1.561-.714h2.388v3zm1-3h1.835c.882 0 1.428.493 2.022 1.105.452.466 1.732 1.895 1.732 1.895h-5.588v-3zm7.424 9.2c-.662 0-1.2-.538-1.2-1.2s.538-1.2 1.2-1.2 1.2.538 1.2 1.2-.538 1.2-1.2 1.2z"/>
</svg>
          <span class="js-filterable__search-target">Small Red Car</span>
        </div>
      </div>
      <div class="col-12 col-md-3 filterable-example__item js-filterable__item" data-filterable-size="big" data-filterable-color="red" data-filterable-vehicle="bike" data-filterable-material="metal">
        <div class="filterable-example__picture filterable-example__picture--red filterable-example__picture--big">
          <svg class="icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24">
  <path fill="#000000" d="M17.565 9.209c.454-.136.937-.209 1.435-.209 2.759 0 5 2.24 5 5s-2.241 5-5 5c-2.76 0-5-2.24-5-5 0-1.906 1.068-3.564 2.639-4.408l-.429-1.039-4.494 5.947h-1.741c-.251 2.525-2.385 4.5-4.975 4.5-2.76 0-5-2.24-5-5s2.24-5 5-5c.635 0 1.244.119 1.803.336l1.181-2.331-.462-1.005h-1.022c-.277 0-.5-.224-.5-.5 0-.239.189-.5.5-.5h2.491c.239 0 .5.189.5.5s-.26.5-.5.5h-.368l.47 1h6.484l-.421-1h-1.656c-.277 0-.5-.224-.5-.5 0-.311.259-.5.5-.5h2.33l1.735 4.209zm-11.217 1.024c-.421-.151-.875-.233-1.348-.233-2.208 0-4 1.792-4 4s1.792 4 4 4c2.038 0 3.722-1.528 3.969-3.5h-3.103c-.174.299-.497.5-.866.5-.552 0-1-.448-1-1 0-.533.419-.97.945-.998l1.403-2.769zm10.675.289c-1.208.689-2.023 1.989-2.023 3.478 0 2.208 1.792 4 4 4s4-1.792 4-4-1.792-4-4-4c-.364 0-.716.049-1.051.14l1.182 2.869c.491.064.869.484.869.991 0 .552-.449 1-1 1-.552 0-1-.448-1-1 0-.229.077-.44.207-.609l-1.184-2.869zm-9.783.165l-1.403 2.766.029.047h3.103c-.147-1.169-.798-2.183-1.729-2.813m.454-.898c1.254.804 2.126 2.152 2.281 3.711h.997l-2.454-5.336-.824 1.625zm7.683-1.789h-5.839l2.212 4.797 3.627-4.797z"/>
</svg>
          <span class="js-filterable__search-target">Big Red Bike</span>
        </div>
      </div>
      <div class="col-12 col-md-3 filterable-example__item js-filterable__item" data-filterable-size="small" data-filterable-color="red" data-filterable-vehicle="bike" data-filterable-material="metal">
        <div class="filterable-example__picture filterable-example__picture--red filterable-example__picture--small">
          <svg class="icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24">
  <path fill="#000000" d="M17.565 9.209c.454-.136.937-.209 1.435-.209 2.759 0 5 2.24 5 5s-2.241 5-5 5c-2.76 0-5-2.24-5-5 0-1.906 1.068-3.564 2.639-4.408l-.429-1.039-4.494 5.947h-1.741c-.251 2.525-2.385 4.5-4.975 4.5-2.76 0-5-2.24-5-5s2.24-5 5-5c.635 0 1.244.119 1.803.336l1.181-2.331-.462-1.005h-1.022c-.277 0-.5-.224-.5-.5 0-.239.189-.5.5-.5h2.491c.239 0 .5.189.5.5s-.26.5-.5.5h-.368l.47 1h6.484l-.421-1h-1.656c-.277 0-.5-.224-.5-.5 0-.311.259-.5.5-.5h2.33l1.735 4.209zm-11.217 1.024c-.421-.151-.875-.233-1.348-.233-2.208 0-4 1.792-4 4s1.792 4 4 4c2.038 0 3.722-1.528 3.969-3.5h-3.103c-.174.299-.497.5-.866.5-.552 0-1-.448-1-1 0-.533.419-.97.945-.998l1.403-2.769zm10.675.289c-1.208.689-2.023 1.989-2.023 3.478 0 2.208 1.792 4 4 4s4-1.792 4-4-1.792-4-4-4c-.364 0-.716.049-1.051.14l1.182 2.869c.491.064.869.484.869.991 0 .552-.449 1-1 1-.552 0-1-.448-1-1 0-.229.077-.44.207-.609l-1.184-2.869zm-9.783.165l-1.403 2.766.029.047h3.103c-.147-1.169-.798-2.183-1.729-2.813m.454-.898c1.254.804 2.126 2.152 2.281 3.711h.997l-2.454-5.336-.824 1.625zm7.683-1.789h-5.839l2.212 4.797 3.627-4.797z"/>
</svg>
          <span class="js-filterable__search-target">Small Red Bike</span>
        </div>
      </div>
      <div class="col-12 col-md-3 filterable-example__item js-filterable__item" data-filterable-size="big" data-filterable-color="blue" data-filterable-vehicle="car" data-filterable-material="metal glass">
        <div class="filterable-example__picture filterable-example__picture--blue filterable-example__picture--big">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="#000000" d="M21.739 10.921c-1.347-.39-1.885-.538-3.552-.921 0 0-2.379-2.359-2.832-2.816-.568-.572-1.043-1.184-2.949-1.184h-7.894c-.511 0-.736.547-.07 1-.742.602-1.619 1.38-2.258 2.027-1.435 1.455-2.184 2.385-2.184 4.255 0 1.76 1.042 3.718 3.174 3.718h.01c.413 1.162 1.512 2 2.816 2 1.304 0 2.403-.838 2.816-2h6.367c.413 1.162 1.512 2 2.816 2s2.403-.838 2.816-2h.685c1.994 0 2.5-1.776 2.5-3.165 0-2.041-1.123-2.584-2.261-2.914zm-15.739 6.279c-.662 0-1.2-.538-1.2-1.2s.538-1.2 1.2-1.2 1.2.538 1.2 1.2-.538 1.2-1.2 1.2zm3.576-6.2c-1.071 0-3.5-.106-5.219-.75.578-.75.998-1.222 1.27-1.536.318-.368.873-.714 1.561-.714h2.388v3zm1-3h1.835c.882 0 1.428.493 2.022 1.105.452.466 1.732 1.895 1.732 1.895h-5.588v-3zm7.424 9.2c-.662 0-1.2-.538-1.2-1.2s.538-1.2 1.2-1.2 1.2.538 1.2 1.2-.538 1.2-1.2 1.2z"/>
</svg>
          <span class="js-filterable__search-target">Big Blue Car</span>
        </div>
      </div>
      <div class="col-12 col-md-3 filterable-example__item js-filterable__item" data-filterable-size="small" data-filterable-color="blue" data-filterable-vehicle="car" data-filterable-material="metal glass">
        <div class="filterable-example__picture filterable-example__picture--blue filterable-example__picture--small">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="#000000" d="M21.739 10.921c-1.347-.39-1.885-.538-3.552-.921 0 0-2.379-2.359-2.832-2.816-.568-.572-1.043-1.184-2.949-1.184h-7.894c-.511 0-.736.547-.07 1-.742.602-1.619 1.38-2.258 2.027-1.435 1.455-2.184 2.385-2.184 4.255 0 1.76 1.042 3.718 3.174 3.718h.01c.413 1.162 1.512 2 2.816 2 1.304 0 2.403-.838 2.816-2h6.367c.413 1.162 1.512 2 2.816 2s2.403-.838 2.816-2h.685c1.994 0 2.5-1.776 2.5-3.165 0-2.041-1.123-2.584-2.261-2.914zm-15.739 6.279c-.662 0-1.2-.538-1.2-1.2s.538-1.2 1.2-1.2 1.2.538 1.2 1.2-.538 1.2-1.2 1.2zm3.576-6.2c-1.071 0-3.5-.106-5.219-.75.578-.75.998-1.222 1.27-1.536.318-.368.873-.714 1.561-.714h2.388v3zm1-3h1.835c.882 0 1.428.493 2.022 1.105.452.466 1.732 1.895 1.732 1.895h-5.588v-3zm7.424 9.2c-.662 0-1.2-.538-1.2-1.2s.538-1.2 1.2-1.2 1.2.538 1.2 1.2-.538 1.2-1.2 1.2z"/>
</svg>
          <span class="js-filterable__search-target">Small Blue Car</span>
        </div>
      </div>
      <div class="col-12 col-md-3 filterable-example__item js-filterable__item" data-filterable-size="big" data-filterable-color="blue" data-filterable-vehicle="bike" data-filterable-material="metal">
        <div class="filterable-example__picture filterable-example__picture--blue filterable-example__picture--big">
          <svg class="icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24">
  <path fill="#000000" d="M17.565 9.209c.454-.136.937-.209 1.435-.209 2.759 0 5 2.24 5 5s-2.241 5-5 5c-2.76 0-5-2.24-5-5 0-1.906 1.068-3.564 2.639-4.408l-.429-1.039-4.494 5.947h-1.741c-.251 2.525-2.385 4.5-4.975 4.5-2.76 0-5-2.24-5-5s2.24-5 5-5c.635 0 1.244.119 1.803.336l1.181-2.331-.462-1.005h-1.022c-.277 0-.5-.224-.5-.5 0-.239.189-.5.5-.5h2.491c.239 0 .5.189.5.5s-.26.5-.5.5h-.368l.47 1h6.484l-.421-1h-1.656c-.277 0-.5-.224-.5-.5 0-.311.259-.5.5-.5h2.33l1.735 4.209zm-11.217 1.024c-.421-.151-.875-.233-1.348-.233-2.208 0-4 1.792-4 4s1.792 4 4 4c2.038 0 3.722-1.528 3.969-3.5h-3.103c-.174.299-.497.5-.866.5-.552 0-1-.448-1-1 0-.533.419-.97.945-.998l1.403-2.769zm10.675.289c-1.208.689-2.023 1.989-2.023 3.478 0 2.208 1.792 4 4 4s4-1.792 4-4-1.792-4-4-4c-.364 0-.716.049-1.051.14l1.182 2.869c.491.064.869.484.869.991 0 .552-.449 1-1 1-.552 0-1-.448-1-1 0-.229.077-.44.207-.609l-1.184-2.869zm-9.783.165l-1.403 2.766.029.047h3.103c-.147-1.169-.798-2.183-1.729-2.813m.454-.898c1.254.804 2.126 2.152 2.281 3.711h.997l-2.454-5.336-.824 1.625zm7.683-1.789h-5.839l2.212 4.797 3.627-4.797z"/>
</svg>
          <span class="js-filterable__search-target">Big Blue Bike</span>
        </div>
      </div>
      <div class="col-12 col-md-3 filterable-example__item js-filterable__item" data-filterable-size="small" data-filterable-color="blue" data-filterable-vehicle="bike" data-filterable-material="metal">
        <div class="filterable-example__picture filterable-example__picture--blue filterable-example__picture--small">
          <svg class="icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24">
  <path fill="#000000" d="M17.565 9.209c.454-.136.937-.209 1.435-.209 2.759 0 5 2.24 5 5s-2.241 5-5 5c-2.76 0-5-2.24-5-5 0-1.906 1.068-3.564 2.639-4.408l-.429-1.039-4.494 5.947h-1.741c-.251 2.525-2.385 4.5-4.975 4.5-2.76 0-5-2.24-5-5s2.24-5 5-5c.635 0 1.244.119 1.803.336l1.181-2.331-.462-1.005h-1.022c-.277 0-.5-.224-.5-.5 0-.239.189-.5.5-.5h2.491c.239 0 .5.189.5.5s-.26.5-.5.5h-.368l.47 1h6.484l-.421-1h-1.656c-.277 0-.5-.224-.5-.5 0-.311.259-.5.5-.5h2.33l1.735 4.209zm-11.217 1.024c-.421-.151-.875-.233-1.348-.233-2.208 0-4 1.792-4 4s1.792 4 4 4c2.038 0 3.722-1.528 3.969-3.5h-3.103c-.174.299-.497.5-.866.5-.552 0-1-.448-1-1 0-.533.419-.97.945-.998l1.403-2.769zm10.675.289c-1.208.689-2.023 1.989-2.023 3.478 0 2.208 1.792 4 4 4s4-1.792 4-4-1.792-4-4-4c-.364 0-.716.049-1.051.14l1.182 2.869c.491.064.869.484.869.991 0 .552-.449 1-1 1-.552 0-1-.448-1-1 0-.229.077-.44.207-.609l-1.184-2.869zm-9.783.165l-1.403 2.766.029.047h3.103c-.147-1.169-.798-2.183-1.729-2.813m.454-.898c1.254.804 2.126 2.152 2.281 3.711h.997l-2.454-5.336-.824 1.625zm7.683-1.789h-5.839l2.212 4.797 3.627-4.797z"/>
</svg>
          <span class="js-filterable__search-target">Small Blue Bike</span>
        </div>
      </div>
    </div>
  </div>

  <div class="filterable-example__no-results js-filterable__no-results">Sorry, no results.</div>
</div>

Autoupdate

Use the data-filterable-autoupdate attribute to immediately update when a filter value is changed.