FEC Pattern Library

Filter tags

Filter tags help users track and confirm which filters have been applied when they are sorting through a list or table of results. Since tags are generated by applying filters, they also create another mechanism by which users can remove applied filters.

Tags aren’t removable when they apply strict limits to the data being viewed, such as

  • one two-year period of time per search
  • a persistent toggle, like processed/raw data

GitHub issues

<style>
    /* When rendering for the pattern library, for some reason the tag item separators needs the top edge set in this instance. This is not a problem on the live site. */
    .tag__item:after {
        top: 0;
    }
</style>

<div class="container" style="padding-top:2rem">
    <div class="row">
        <h3 class="tags__title">Viewing
            <span class="js-count" aria-hidden="false">about
                <span class="tags__count">119</span>
            </span>
            <span class="js-result-type">filtered results for:</span>
        </h3><button type="button" class="js-filter-clear button--unstyled tags__clear" aria-hidden="false">Clear all filters</button>
    </div>

    <ul class="tags" aria-hidden="false">
        <li data-tag-category="has_raised_funds" class="tag__category">
            <div data-id="cycle-checkbox-has-raised-funds" data-removable="true" class="tag__item">Has raised more than $0
                <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
            </div>
        </li>
        <li data-tag-category="office" class="tag__category">
            <div data-id="cycle-checkbox-p" data-removable="true" class="tag__item">President
                <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
            </div>
            <div data-id="cycle-checkbox-h" data-removable="true" class="tag__item">House
                <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
            </div>
        </li>
        <li data-tag-category="party" class="tag__category">
            <div data-id="party-DEM" data-removable="true" class="tag__item">Democratic Party
                <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
            </div>
        </li>
        <li data-tag-category="party" class="tag__category">
            <div data-id="party-REP" data-removable="true" class="tag__item">Republican Party
                <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
            </div>
        </li>
        <li data-tag-category="state" class="tag__category">
            <div data-id="state-checkbox-VA" data-removable="true" class="tag__item">Virginia
                <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
            </div>
            <div data-id="state-checkbox-TX" data-removable="true" class="tag__item">Texas
                <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
            </div>
            <div data-id="state-checkbox-NY" data-removable="true" class="tag__item">New York
                <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
            </div>
        </li>
        <li data-tag-category="election_year" class="tag__category">
            <div data-id="election_year-checkbox-2016" data-removable="true" class="tag__item">2016
                <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
            </div>
        </li>
    </ul>
</div>

<div class="container" style="padding-top:6rem">
    <div class="row">
        <h3 class="tags__title">Viewing
            <span class="js-count" aria-hidden="false">about
                <span class="tags__count">7,000</span>
            </span>
            <span class="js-result-type">filtered results for:</span>
        </h3><button type="button" class="js-filter-clear button--unstyled tags__clear" aria-hidden="false">Clear all filters</button>
    </div>

    <ul class="tags" aria-hidden="false">
        <li data-tag-category="data_type" class="tag__category">
            <div data-id="data_type-toggle" data-removable="false" data-remove-on-switch="false" class="tag__item">
                <span class="prefix">Data type: </span>processed
            </div>
        </li>
        <li data-tag-category="date" class="tag__category tag__category__range--date">
            <div data-id="min_date" data-removable="false" data-remove-on-switch="true" class="tag__item">
                <span class="prefix">Beginning </span>01/01/2017
            </div>
            <div data-id="max_date" data-removable="false" data-remove-on-switch="true" class="tag__item">
                <span class="prefix">Ending </span>03/03/2018
            </div>
        </li>
        <li data-tag-category="line_number" class="tag__category">
            <div data-id="line_number-F3-11D" data-removable="true" class="tag__item">
                <span class="prefix">House or Senate committees: </span>Contributions from the candidate (Line 11d)
                <button class="button js-close tag__remove">
                    <span class="u-visually-hidden">Remove</span>
                </button>
            </div>
        </li>
    </ul>
</div>
 
<style>
/* When rendering for the pattern library, for some reason the tag item separators needs the top edge set in this instance. This is not a problem on the live site. */
.tag__item:after {
  top: 0;
}
</style>

<div class="container" style="padding-top:2rem">
  <div class="row">
    <h3 class="tags__title">Viewing
      <span class="js-count" aria-hidden="false">about
        <span class="tags__count">119</span>
      </span>
      <span class="js-result-type">filtered results for:</span>
    </h3><button type="button" class="js-filter-clear button--unstyled tags__clear" aria-hidden="false">Clear all filters</button>
  </div>

  <ul class="tags" aria-hidden="false">
    <li data-tag-category="has_raised_funds" class="tag__category">
      <div data-id="cycle-checkbox-has-raised-funds" data-removable="true" class="tag__item">Has raised more than $0
        <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
      </div>
    </li>
    <li data-tag-category="office" class="tag__category">
      <div data-id="cycle-checkbox-p" data-removable="true" class="tag__item">President
        <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
      </div>
      <div data-id="cycle-checkbox-h" data-removable="true" class="tag__item">House
        <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
      </div>
    </li>
    <li data-tag-category="party" class="tag__category">
      <div data-id="party-DEM" data-removable="true" class="tag__item">Democratic Party
        <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
      </div>
    </li>
    <li data-tag-category="party" class="tag__category">
      <div data-id="party-REP" data-removable="true" class="tag__item">Republican Party
        <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
      </div>
    </li>
    <li data-tag-category="state" class="tag__category">
      <div data-id="state-checkbox-VA" data-removable="true" class="tag__item">Virginia
        <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
      </div>
      <div data-id="state-checkbox-TX" data-removable="true" class="tag__item">Texas
        <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
      </div>
      <div data-id="state-checkbox-NY" data-removable="true" class="tag__item">New York
        <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
      </div>
    </li>
    <li data-tag-category="election_year" class="tag__category">
      <div data-id="election_year-checkbox-2016" data-removable="true" class="tag__item">2016
        <button class="button js-close tag__remove"><span class="u-visually-hidden">Remove</span></button>
      </div>
    </li>
  </ul>
</div>

<div class="container" style="padding-top:6rem">
  <div class="row">
    <h3 class="tags__title">Viewing
      <span class="js-count" aria-hidden="false">about
        <span class="tags__count">7,000</span>
      </span>
      <span class="js-result-type">filtered results for:</span>
    </h3><button type="button" class="js-filter-clear button--unstyled tags__clear" aria-hidden="false">Clear all filters</button>
  </div>

  <ul class="tags" aria-hidden="false">
    <li data-tag-category="data_type" class="tag__category">
      <div data-id="data_type-toggle" data-removable="false" data-remove-on-switch="false" class="tag__item">
        <span class="prefix">Data type: </span>processed
      </div>
    </li>
    <li data-tag-category="date" class="tag__category tag__category__range--date">
      <div data-id="min_date" data-removable="false" data-remove-on-switch="true" class="tag__item">
        <span class="prefix">Beginning </span>01/01/2017
      </div>
      <div data-id="max_date" data-removable="false" data-remove-on-switch="true" class="tag__item">
        <span class="prefix">Ending </span>03/03/2018
      </div>
    </li>
    <li data-tag-category="line_number" class="tag__category">
      <div data-id="line_number-F3-11D" data-removable="true" class="tag__item">
        <span class="prefix">House or Senate committees: </span>Contributions from the candidate (Line 11d)
        <button class="button js-close tag__remove">
          <span class="u-visually-hidden">Remove</span>
        </button>
      </div>
    </li>
  </ul>
</div>
 
/* No context defined. */