🍷 Digital Wine Cellar – Pattern Library

Multi select filters: Default 

<div class="filter-group">
    <div class="form-item custom-select">
        <label for="821e27b2-4dbd-7a51-7a01-02d0beac78ae">Producer</label>
        <select id="821e27b2-4dbd-7a51-7a01-02d0beac78ae" name="821e27b2-4dbd-7a51-7a01-02d0beac78ae" multiple class="custom-select">
            <option value="option-0">Producer 1</option>
            <option value="option-1">Producer 2</option>
            <option value="option-2">Producer 3</option>
        </select>
    </div>
    <div class="form-item custom-select">
        <label for="60eebe08-c459-e8ea-ab44-43a8c54ab8ea">Colour</label>
        <select id="60eebe08-c459-e8ea-ab44-43a8c54ab8ea" name="60eebe08-c459-e8ea-ab44-43a8c54ab8ea" multiple class="custom-select">
            <option value="option-0">Red</option>
            <option value="option-1">White</option>
            <option value="option-2">Rosé</option>
        </select>
    </div>
    <div class="form-item custom-select">
        <label for="1ce0d938-4c4e-b978-1847-ce9cb8a5e347">Country</label>
        <select id="1ce0d938-4c4e-b978-1847-ce9cb8a5e347" name="1ce0d938-4c4e-b978-1847-ce9cb8a5e347" multiple class="custom-select">
            <option value="option-0">Argentina</option>
            <option value="option-1">Australia</option>
            <option value="option-2">France</option>
            <option value="option-3">Germany</option>
            <option value="option-4">Hungary</option>
            <option value="option-5">Italy</option>
            <option value="option-6">New Zealand</option>
            <option value="option-7">South Africa</option>
            <option value="option-8">United States</option>
        </select>
    </div>
    <div class="form-item custom-select">
        <label for="c6b8f509-38ee-7d72-53df-ea12a4e21c2f">Dish</label>
        <select id="c6b8f509-38ee-7d72-53df-ea12a4e21c2f" name="c6b8f509-38ee-7d72-53df-ea12a4e21c2f" multiple class="custom-select">
            <option value="option-0">Bruschetta con pomodori</option>
            <option value="option-1">Carpaccio di cervo</option>
            <option value="option-2">Parmigiana della nonna</option>
            <option value="option-3">Tagliere casereccio</option>
            <option value="option-4">Tournedos Rossini</option>
            <option value="option-5">Carne de Ávila</option>
            <option value="option-6">Tourtière</option>
        </select>
    </div>
</div>

<div class="simple-accordion">
    <div class="simple-accordion-item">
        <p class="simple-accordion-title">
            <span>Show more filters</span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#angle" />
            </svg>
        </p>
        <div class="collapsible-content">
            <div class="simple-accordion-inner-content">
                <div class="filter-group">
                    <div class="form-item custom-select">
                        <label for="41c039b9-ac2d-231c-49ac-367903714de8">Region</label>
                        <select id="41c039b9-ac2d-231c-49ac-367903714de8" name="41c039b9-ac2d-231c-49ac-367903714de8" multiple class="custom-select">
                            <option value="option-0">Region 1</option>
                            <option value="option-1">Region 2</option>
                            <option value="option-2">Region 3</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="8c1d3257-34d1-0530-2fc6-a7828329a350">District</label>
                        <select id="8c1d3257-34d1-0530-2fc6-a7828329a350" name="8c1d3257-34d1-0530-2fc6-a7828329a350" multiple class="custom-select">
                            <option value="option-0">District 1</option>
                            <option value="option-1">District 2</option>
                            <option value="option-2">District 3</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="74c03827-a634-57ba-7666-93765afbf31b">Grape</label>
                        <select id="74c03827-a634-57ba-7666-93765afbf31b" name="74c03827-a634-57ba-7666-93765afbf31b" multiple class="custom-select">
                            <option value="option-0">Chardonnay</option>
                            <option value="option-1">Cabernet Sauvignon</option>
                            <option value="option-2">Grenache</option>
                            <option value="option-3">Syrah</option>
                            <option value="option-4">Merlot</option>
                            <option value="option-5">Sangiovese</option>
                            <option value="option-6">Pinot Noir</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="759b5956-ed51-bea2-6ba8-5ccdb901ebd6">Style</label>
                        <select id="759b5956-ed51-bea2-6ba8-5ccdb901ebd6" name="759b5956-ed51-bea2-6ba8-5ccdb901ebd6" multiple class="custom-select">
                            <option value="option-0">Dry</option>
                            <option value="option-1">Medium dry</option>
                            <option value="option-2">Medium Sweet</option>
                            <option value="option-3">Sweet</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="ef747d6e-c1b0-ccbe-6a7e-95dce7b15a23">Type</label>
                        <select id="ef747d6e-c1b0-ccbe-6a7e-95dce7b15a23" name="ef747d6e-c1b0-ccbe-6a7e-95dce7b15a23" multiple class="custom-select">
                            <option value="option-0">Still</option>
                            <option value="option-1">Sparkling</option>
                            <option value="option-2">Fortified</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="da723f0d-3908-2aea-df87-868821e85504">Weight</label>
                        <select id="da723f0d-3908-2aea-df87-868821e85504" name="da723f0d-3908-2aea-df87-868821e85504" multiple class="custom-select">
                            <option value="option-0">Light bodied</option>
                            <option value="option-1">Medium bodied</option>
                            <option value="option-2">Light Bodied to Full bodied</option>
                            <option value="option-3">Medium bodied to Full bodied</option>
                            <option value="option-4">Full bodied</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="cd3477ab-d2d2-f09d-ed02-b6e93b3ebe74">Drinkability</label>
                        <select id="cd3477ab-d2d2-f09d-ed02-b6e93b3ebe74" name="cd3477ab-d2d2-f09d-ed02-b6e93b3ebe74" multiple class="custom-select">
                            <option value="option-0">Old</option>
                            <option value="option-1">Early</option>
                            <option value="option-2">Mature</option>
                            <option value="option-3">Late</option>
                            <option value="option-4">Young</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="92c08a03-c474-6091-1cb9-52a865d1adc8">Purchase price</label>
                        <select id="92c08a03-c474-6091-1cb9-52a865d1adc8" name="92c08a03-c474-6091-1cb9-52a865d1adc8" multiple class="custom-select">
                            <option value="option-0">0 - 199</option>
                            <option value="option-1">200 - 399</option>
                            <option value="option-2">400 - 499</option>
                            <option value="option-3">500 - 599</option>
                            <option value="option-4">600 - 699</option>
                            <option value="option-5">700 - 799</option>
                            <option value="option-6">800 - 999</option>
                            <option value="option-7">1000 - 1499</option>
                            <option value="option-8">1500 - 1999</option>
                            <option value="option-9">2000 - 2999</option>
                            <option value="option-10">3000 - 9999</option>
                            <option value="option-11">10000 and up</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="010ad498-f681-0f40-df57-2bb3049b78b2">Bottle size</label>
                        <select id="010ad498-f681-0f40-df57-2bb3049b78b2" name="010ad498-f681-0f40-df57-2bb3049b78b2" multiple class="custom-select">
                            <option value="option-0">37,5 cl</option>
                            <option value="option-1">75 cl</option>
                            <option value="option-2">150 cl</option>
                            <option value="option-3">300 cl</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="710ffe38-d0fc-4878-8038-1cee7f5f7f2c">Case size</label>
                        <select id="710ffe38-d0fc-4878-8038-1cee7f5f7f2c" name="710ffe38-d0fc-4878-8038-1cee7f5f7f2c" multiple class="custom-select">
                            <option value="option-0">6 bottles</option>
                            <option value="option-1">12 bottles</option>
                            <option value="option-2">18 bottles</option>
                            <option value="option-3">24 bottles</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="185fdf2b-42f9-e005-bdc8-6d6f666265eb">Supplier</label>
                        <select id="185fdf2b-42f9-e005-bdc8-6d6f666265eb" name="185fdf2b-42f9-e005-bdc8-6d6f666265eb" multiple class="custom-select">
                            <option value="option-0">Supplier 1</option>
                            <option value="option-1">Supplier 2</option>
                            <option value="option-2">Supplier 3</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="959f9dc5-a447-ddd6-79c1-d45011c83223">Wine list price</label>
                        <select id="959f9dc5-a447-ddd6-79c1-d45011c83223" name="959f9dc5-a447-ddd6-79c1-d45011c83223" multiple class="custom-select">
                            <option value="option-0">0 - 399</option>
                            <option value="option-1">400 - 499</option>
                            <option value="option-2">500 - 599</option>
                            <option value="option-3">600 - 699</option>
                            <option value="option-4">700 - 799</option>
                            <option value="option-5">800 - 999</option>
                            <option value="option-6">1000 - 1499</option>
                            <option value="option-7">1500 - 1999</option>
                            <option value="option-8">2000 - 2999</option>
                            <option value="option-9">3000 - 9999</option>
                            <option value="option-10">10000 and up</option>
                        </select>
                    </div>
                    <div class="form-item custom-select">
                        <label for="b28b3535-07c4-f427-b82a-c449624866a7">Bottles sold</label>
                        <select id="b28b3535-07c4-f427-b82a-c449624866a7" name="b28b3535-07c4-f427-b82a-c449624866a7" multiple class="custom-select">
                            <option value="option-0">Today</option>
                            <option value="option-1">Last 7 days</option>
                            <option value="option-2">Last 30 days</option>
                            <option value="option-3">Last 365 days</option>
                            <option value="option-4">WTD</option>
                            <option value="option-5">MTD</option>
                            <option value="option-6">YTD</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="filter-group">
  {{> @form-item-select producer id=(random)}}
  {{> @form-item-select colour id=(random)}}
  {{> @form-item-select country id=(random)}}
  {{> @form-item-select dish id=(random)}}
</div>

{{#> @simple-accordion title="Show more filters" }}
  <div class="filter-group">
    {{> @form-item-select region id=(random)}}
    {{> @form-item-select district id=(random)}}
    {{> @form-item-select grape id=(random)}}
    {{> @form-item-select style id=(random)}}
    {{> @form-item-select type id=(random)}}
    {{> @form-item-select weight id=(random)}}
    {{> @form-item-select drinkability id=(random)}}
    {{> @form-item-select purchase-price id=(random)}}
    {{> @form-item-select bottle-size id=(random)}}
    {{> @form-item-select case-size id=(random)}}
    {{> @form-item-select supplier id=(random)}}
    {{> @form-item-select wine-list-price id=(random)}}
    {{> @form-item-select bottles-sold id=(random)}}
  </div>
{{/ @simple-accordion }}
 
{
  "producer": {
    "label": "Producer",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Producer 1"
      },
      {
        "option": "Producer 2"
      },
      {
        "option": "Producer 3"
      }
    ]
  },
  "colour": {
    "label": "Colour",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Red"
      },
      {
        "option": "White"
      },
      {
        "option": "Rosé"
      }
    ]
  },
  "country": {
    "label": "Country",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Argentina"
      },
      {
        "option": "Australia"
      },
      {
        "option": "France"
      },
      {
        "option": "Germany"
      },
      {
        "option": "Hungary"
      },
      {
        "option": "Italy"
      },
      {
        "option": "New Zealand"
      },
      {
        "option": "South Africa"
      },
      {
        "option": "United States"
      }
    ]
  },
  "dish": {
    "label": "Dish",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Bruschetta con pomodori"
      },
      {
        "option": "Carpaccio di cervo"
      },
      {
        "option": "Parmigiana della nonna"
      },
      {
        "option": "Tagliere casereccio"
      },
      {
        "option": "Tournedos Rossini"
      },
      {
        "option": "Carne de Ávila"
      },
      {
        "option": "Tourtière"
      }
    ]
  },
  "bottle-size": {
    "label": "Bottle size",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "37,5 cl"
      },
      {
        "option": "75 cl"
      },
      {
        "option": "150 cl"
      },
      {
        "option": "300 cl"
      }
    ]
  },
  "case-size": {
    "label": "Case size",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "6 bottles"
      },
      {
        "option": "12 bottles"
      },
      {
        "option": "18 bottles"
      },
      {
        "option": "24 bottles"
      }
    ]
  },
  "weight": {
    "label": "Weight",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Light bodied"
      },
      {
        "option": "Medium bodied"
      },
      {
        "option": "Light Bodied to Full bodied"
      },
      {
        "option": "Medium bodied to Full bodied"
      },
      {
        "option": "Full bodied"
      }
    ]
  },
  "style": {
    "label": "Style",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Dry"
      },
      {
        "option": "Medium dry"
      },
      {
        "option": "Medium Sweet"
      },
      {
        "option": "Sweet"
      }
    ]
  },
  "drinkability": {
    "label": "Drinkability",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Old"
      },
      {
        "option": "Early"
      },
      {
        "option": "Mature"
      },
      {
        "option": "Late"
      },
      {
        "option": "Young"
      }
    ]
  },
  "type": {
    "label": "Type",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Still"
      },
      {
        "option": "Sparkling"
      },
      {
        "option": "Fortified"
      }
    ]
  },
  "grape": {
    "label": "Grape",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Chardonnay"
      },
      {
        "option": "Cabernet Sauvignon"
      },
      {
        "option": "Grenache"
      },
      {
        "option": "Syrah"
      },
      {
        "option": "Merlot"
      },
      {
        "option": "Sangiovese"
      },
      {
        "option": "Pinot Noir"
      }
    ]
  },
  "district": {
    "label": "District",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "District 1"
      },
      {
        "option": "District 2"
      },
      {
        "option": "District 3"
      }
    ]
  },
  "supplier": {
    "label": "Supplier",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Supplier 1"
      },
      {
        "option": "Supplier 2"
      },
      {
        "option": "Supplier 3"
      }
    ]
  },
  "bottles-sold": {
    "label": "Bottles sold",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Today"
      },
      {
        "option": "Last 7 days"
      },
      {
        "option": "Last 30 days"
      },
      {
        "option": "Last 365 days"
      },
      {
        "option": "WTD"
      },
      {
        "option": "MTD"
      },
      {
        "option": "YTD"
      }
    ]
  },
  "region": {
    "label": "Region",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Region 1"
      },
      {
        "option": "Region 2"
      },
      {
        "option": "Region 3"
      }
    ]
  },
  "purchase-price": {
    "label": "Purchase price",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "0 - 199"
      },
      {
        "option": "200 - 399"
      },
      {
        "option": "400 - 499"
      },
      {
        "option": "500 - 599"
      },
      {
        "option": "600 - 699"
      },
      {
        "option": "700 - 799"
      },
      {
        "option": "800 - 999"
      },
      {
        "option": "1000 - 1499"
      },
      {
        "option": "1500 - 1999"
      },
      {
        "option": "2000 - 2999"
      },
      {
        "option": "3000 - 9999"
      },
      {
        "option": "10000 and up"
      }
    ]
  },
  "wine-list-price": {
    "label": "Wine list price",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "0 - 399"
      },
      {
        "option": "400 - 499"
      },
      {
        "option": "500 - 599"
      },
      {
        "option": "600 - 699"
      },
      {
        "option": "700 - 799"
      },
      {
        "option": "800 - 999"
      },
      {
        "option": "1000 - 1499"
      },
      {
        "option": "1500 - 1999"
      },
      {
        "option": "2000 - 2999"
      },
      {
        "option": "3000 - 9999"
      },
      {
        "option": "10000 and up"
      }
    ]
  },
  "stored-at": {
    "label": "Stored at",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Shelf 1"
      },
      {
        "option": "Shelf 2"
      },
      {
        "option": "Shelf 3"
      },
      {
        "option": "Shelf 4"
      },
      {
        "option": "Shelf 5"
      },
      {
        "option": "Shelf 6"
      }
    ]
  },
  "users-filter": {
    "label": "Filter",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "gordon"
      },
      {
        "option": "ben"
      },
      {
        "option": "andrey"
      },
      {
        "option": "alfredo"
      },
      {
        "option": "Gordon Ramsay"
      },
      {
        "option": "Ben Bernanke"
      },
      {
        "option": "Andrey Ivanov"
      },
      {
        "option": "Alfredo Linguini"
      },
      {
        "option": "gordon@gusteaus.fr"
      },
      {
        "option": "ben@gusteaus.fr"
      },
      {
        "option": "andrey@gusteaus.fr"
      },
      {
        "option": "alfredo@gusteaus.fr"
      }
    ]
  },
  "role": {
    "label": "Role",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Administrator"
      },
      {
        "option": "Economy"
      },
      {
        "option": "Sommelier"
      },
      {
        "option": "Server"
      }
    ]
  }
}
  • Content: 
    /**
 * Filter form
 */
@media screen {

  @supports (display: grid) {

    .filter-group {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 1rem;
    }

    @media (min-width: 32em) {

      .filter-group {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
      }
    }

    .filter-group .form-item + .form-item {
      margin-top: 0;
    }

    .filter-form .submit-area {
      grid-column: 1 / -1;
    }
  }

  /**
   * Choices custom styling
   */
  .choices__inner * + *,
  .choices__item {
    margin-top: 0;
  }

  .choices__inner,
  .choices__input {
    background-color: var(--input-bg);
    font-size: unset;
  }

  .choices__inner {
    border-color: var(--input-accent);
    border-radius: 0;
    min-height: auto;
    padding: 0.125rem 0.25rem;
  }

  .choices__input {
    margin-bottom: 0;
    border: 0 !important;
  }

  .choices__list--dropdown {
    z-index: 2;
  }

  .choices__heading {
    background-color: unset;
    border-bottom-color: var(--light-grey);
    color: unset;
    margin-top: 0.4rem;
  }

  .choices__list--multiple .choices__item {
    background-color: var(--choices-item);
    border: 0;
    border-radius: 3px;
    padding: 0 0.5rem;
  }

  .choices[data-type*="select-multiple"] .choices__button,
  .choices[data-type*="text"] .choices__button {
    border-left: 0;
    box-shadow: none;
    padding-left: 0.5rem;
  }
}
  • URL: /components/raw/multi-select-filter/multi-select-filter.css
  • Filesystem Path: components/03_organisms/multi-select-filter/multi-select-filter.css
  • Size: 1.4 KB
  • Content: 
    /**
 * Initialize Choices for our special little filter
 */

/* global Choices */

(function() {
  const filterCategories = document.querySelectorAll('select.custom-select');

  // Stop if no element is present
  if (!filterCategories.length) return;

  new Choices('select.custom-select', {
    removeItemButton: true,
    shouldSort: false,
  });
})();
  • URL: /components/raw/multi-select-filter/multi-select-filter.js
  • Filesystem Path: components/03_organisms/multi-select-filter/multi-select-filter.js
  • Size: 355 Bytes

No notes defined.