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