Filters

Usage

html
            <button class="rc-md-down rc-btn rc-btn--icon-label rc-icon rc-filter--xs rc-iconography" data-filter-trigger="filter-example">Filter Products</button>
<aside class="rc-filters" data-filter-target="filter-example">
  <form class="rc-filters__form" action="" name="example-filter">
    <header class="rc-filters__header">
      <button class="rc-md-down rc-stick-left rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography" data-filter-trigger="filter-example"
      type="button"></button>
      <h1 class="rc-filters__heading rc-padding-top--sm rc-padding-bottom--xs rc-header-with-icon rc-header-with-icon--alpha">
        <span class="md-up rc-icon rc-filter--xs rc-iconography"></span>Filter Products
      </h1>
    </header>
    <main class="rc-filters__main">
      <div class="rc-list__accordion-item">
        <fieldset class="rc-fieldset" data-toggle-group data-toggle-effect="rc-expand--vertical">
          <legend class="rc-list__header" id="age-header" data-toggle="age">
            <strong>Age 1</strong>
            <a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
          </legend>
          <div id="age" aria-labelledby="age-header" class="rc-list__content">
            <div class="rc-slider" data-js-slider data-js-min="0" data-js-max="32" data-js-start="0" data-js-step="1" data-js-labels='[{"value":0,"label":"All Ages"},{"value":1,"label":"1 Week"},{"value":2,"label":"2 Weeks"},{"value":3,"label":"3 Weeks"},{"value":4,"label":"4 Weeks"},{"value":5,"label":"5 Weeks"},{"value":6,"label":"6 Weeks"},{"value":7,"label":"7 Weeks"},{"value":8,"label":"8 Weeks"},{"value":8.7,"label":"2 Months"},{"value":13,"label":"3 Months"},{"value":17.4,"label":"4 Months"},{"value":21.7,"label":"5 Months"},{"value":26.1,"label":"6 Months"},{"value":30.4,"label":"7 Months"},{"value":34.8,"label":"8 Months"},{"value":39.1,"label":"9 Months"},{"value":43.5,"label":"10 Months"},{"value":47.8,"label":"11 Months"},{"value":52.2,"label":"12 Months"},{"value":56.5,"label":"13 Months"},{"value":60.9,"label":"14 Months"},{"value":65.2,"label":"15 Months"},{"value":69.6,"label":"16 Months"},{"value":73.9,"label":"17 Months"},{"value":78.3,"label":"18 Months"},{"value":82.6,"label":"19 Months"},{"value":87,"label":"20 Months"},{"value":91.3,"label":"21 Months"},{"value":95.7,"label":"22 Months"},{"value":100,"label":"23 Months"},{"value":104.4,"label":"24 Months"},{"value":156.5,"label":"3 Years"}]'>
              <input type="text" id="slider-result" />
            </div>
          </div>
        </fieldset>
      </div>
      <div class="rc-list__accordion-item">
        <fieldset class="rc-fieldset" data-toggle-group data-toggle-effect="rc-expand--vertical">
          <legend class="rc-list__header" id="breed-header" data-toggle="breed">
            <strong>Breed</strong>
            <a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
          </legend>
          <ul class="rc-list rc-list--blank rc-list--align rc-list__content" id="breed" aria-labelledby="breed-header" role="menu">
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="lab" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="lab">Labrador Retriever (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="air" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="air">Airedale Terrier Copy (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="ala" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="ala">Alaskan Malamute Copy (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="aki" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="aki">Akita Copy (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="afg" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="afg">Afghan Hound Copy (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="amer" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="amer">American Akita (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="aff" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="aff">Affenpinscher (
                  <span data-custom="">5</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="alp" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="alp">Alpine Dachsbracke (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="bea" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="bea">Beagle (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
          </ul>
        </fieldset>
      </div>
      <div class="rc-list__accordion-item">
        <fieldset class="rc-fieldset" data-toggle-group data-toggle-effect="rc-expand--vertical">
          <legend class="rc-list__header" id="drywet-header" data-toggle="drywet">
            <strong>Dry/Wet</strong>
            <a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
          </legend>
          <ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="drywet" aria-labelledby="drywet-header" role="menu">
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="dry" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="dry">Dry (
                  <span data-custom="">5</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="wet" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="wet">Wet (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="tre" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="tre">Treats (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
          </ul>
        </fieldset>
      </div>
      <div class="rc-list__accordion-item">
        <fieldset class="rc-fieldset" data-toggle-group data-toggle-effect="rc-expand--vertical">
          <legend class="rc-list__header" id="size-header" data-toggle="size">
            <strong>Size</strong>
            <a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
          </legend>
          <ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="size" aria-labelledby="size-header" role="menu">
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="xsm" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="xsm">X-Small (
                  <span data-custom="">5</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="sm" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="sm">Small (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="md" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="md">Medium (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="lg" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="lg">Large (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="gia" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="gia">Giant (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
          </ul>
        </fieldset>
      </div>
      <div class="rc-list__accordion-item">
        <fieldset class="rc-fieldset rc-list__accordion-item" data-toggle-group data-toggle-effect="rc-expand--vertical">
          <legend class="rc-list__header" id="special-needs-header" data-toggle="special-needs">
            <strong>Special Needs</strong>
            <a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
          </legend>
          <ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="special-needs" aria-labelledby="special-needs-header"
            role="menu">
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="sp1" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="sp1">Special Need 1 (
                  <span data-custom="">6</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="sp2" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="sp2">Special Need 2 (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="sp3" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="sp3">Special Need 3 (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
          </ul>
        </fieldset>
      </div>
      <div class="rc-list__accordion-item">
        <fieldset class="rc-fieldset" data-toggle-group data-toggle-effect="rc-expand--vertical">
          <legend class="rc-list__header" id="indications-header" data-toggle="indications">
            <strong>Indications</strong>
            <a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
          </legend>
          <ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="indications" aria-labelledby="indications-header"
            role="menu">
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="lis" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="lis">Listlessness (
                  <span data-custom="">6</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="res" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="res">Restless (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
          </ul>
        </fieldset>
      </div>
      <div class="rc-list__accordion-item">
        <fieldset class="rc-fieldset" data-toggle-group data-toggle-effect="rc-expand--vertical">
          <legend class="rc-list__header" id="counter-indications-header" data-toggle="counter-indications">
            <strong>Counter Indications</strong>
            <a class="rc-styled-link rc-list__header-link" href="#/">Clear</a>
          </legend>
          <ul class="rc-list rc-list__content rc-list--blank rc-list--align" id="counter-indications" aria-labelledby="counter-indications-header"
            role="menu">
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="gro" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="gro">Growth (
                  <span data-custom="">6</span>)</label>
              </div>
            </li>
            <li class="rc-list__item">
              <div class="rc-input rc-input--stacked">
                <input class="rc-input__checkbox" id="preg" type="checkbox" name="checkbox" value="input-label" />
                <label class="rc-input__label--inline" for="preg">Pregnancy (
                  <span data-custom="">0</span>)</label>
              </div>
            </li>
          </ul>
        </fieldset>
      </div>
    </main>
    <footer class="rc-filters__footer rc-md-down">
      <button class="rc-btn rc-full-width rc-margin-bottom--md rc-btn--two">Clear filters</button>
      <button class="rc-btn rc-full-width rc-btn--one">Apply filters</button>
    </footer>
  </form>

</aside>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 3rd October 2018 [ui_assets/components/filters.yml]
    Filter buttons change to full width
  • 1st October 2018 [ui_assets/components/filters.yml]
    Update filter lists
  • 18th September 2018 [ui_assets/components/filters.yml]
    Change markup for new one
  • 18th September 2018 [ui_assets/components/filters.yml]
    Sync up filters markup
  • 12th September 2018 [ui_assets/components/filters.yml]
    Remove unnecessary margins from filter
  • 10th September 2018 [ui_assets/components/filters.yml]
    Update filter classname
  • 6th September 2018 [ui_assets/components/filters.yml]
    Added note about even propagation on clear filter button
  • 6th September 2018 [ui_assets/components/filters.yml]
    Fixes from QA
  • 4th September 2018 [ui_assets/components/filters.yml]
    Add missing prefixes
  • 4th September 2018 [ui_assets/components/filters.yml]
    Add page for filters