Faceting

CSS file | JS file

Facet sets

Indeterminate checkboxes

<fieldset class="sba-c-facet-set sba-c-fieldset sba-c-fieldset--inputs">
  <legend class="sba-c-facet-set__legend">Review type</legend>
  <ul class="sba-c-unstyled-list">
    <li>
      <input class="sba-c-checkbox" id="annual_review" type="checkbox" name="review_type" aria-controls="followup1" data-follow-up="followup1" aria-expanded="false">
      <label class="sba-c-label" for="annual_review">Annual Review</label>
      <div class="sba-c-follow-up sba-c-follow-up--sm" id="followup1" hidden>
        <fieldset class="sba-c-facet-set sba-c-fieldset sba-c-fieldset--inputs">
          <legend class="sba-c-facet-set__legend sba-c-facet-set__legend--l2">Status</legend>
          <ul class="sba-c-unstyled-list">
            <li>
              <input class="sba-c-checkbox" id="ar-1" type="checkbox" name="ar">
              <label class="sba-c-label" for="ar-1">Screening</label>
            </li>
            <li>
              <input class="sba-c-checkbox" id="ar-2" type="checkbox" name="ar">
              <label class="sba-c-label" for="ar-2">Processing</label>
            </li>
          </ul>
        </fieldset>
      </div>
    </li>
    <li>
      <input class="sba-c-checkbox sba-c-checkbox--parent" id="initial_application" type="checkbox" name="review_type" aria-controls="followup2" data-follow-up="followup2" aria-expanded="false">
      <label class="sba-c-label" for="initial_application">Initial Application</label>
      <div class="sba-c-follow-up sba-c-follow-up--sm" id="followup2" hidden>
        <fieldset class="sba-c-facet-set sba-c-fieldset sba-c-fieldset--inputs">
          <legend class="sba-c-facet-set__legend sba-c-facet-set__legend--l2">Status</legend>
          <ul class="sba-c-unstyled-list">
            <li>
              <input class="sba-c-checkbox" id="ia-1" type="checkbox" name="ia">
              <label class="sba-c-label" for="ia-1">Draft</label>
            </li>
            <li>
              <input class="sba-c-checkbox" id="ia-2" type="checkbox" name="ia">
              <label class="sba-c-label" for="ia-2">Submitted</label>
            </li>
          </ul>
        </fieldset>
      </div>
    </li>
  </ul>
</fieldset>

Faceting with accordions

Sets of facets can also be controlled by accordions.

Note: This is mix of components from the U.S. Web Design Standards and Certify utility classes. This pattern should be cleaned up in the near future.

<fieldset class="sba-c-facet-set sba-c-fieldset sba-c-fieldset--inputs">
  <legend class="sba-c-facet-set__legend">Review type</legend>
  <ul class="sba-c-unstyled-list sba-u-margin-top--1">
    <li>
      <ul class="usa-accordion">
        <li class="sba-u-bgcolor--transparent">
          <button class="usa-accordion-button sba-u-padding--0 sba-u-padding-y--1 sba-u-bgcolor--transparent"
            aria-expanded="false"
            aria-controls="a1" type="button">
            Annual Review
          </button>
          <div id="a1" aria-hidden="true" class="usa-accordion-content sba-u-padding--0">
            <fieldset class="sba-c-facet-set sba-c-fieldset sba-c-fieldset--inputs">
              <legend class="sba-c-facet-set__legend sba-c-facet-set__legend--l2">Status</legend>
              <ul class="sba-c-unstyled-list">
                <li>
                  <input class="sba-c-checkbox" id="ar2-1" type="checkbox" name="ar">
                  <label class="sba-c-label" for="ar2-1">Screening</label>
                </li>
                <li>
                  <input class="sba-c-checkbox" id="ar2-2" type="checkbox" name="ar">
                  <label class="sba-c-label" for="ar2-2">Processing</label>
                </li>
              </ul>
            </fieldset>
          </div>
        </li>
      </ul>
    </li>
    <li>
      <ul class="usa-accordion">
        <li class="sba-u-bgcolor--transparent">
          <button class="usa-accordion-button sba-u-padding--0 sba-u-padding-y--1 sba-u-bgcolor--transparent"
            aria-expanded="false"
            aria-controls="a2" type="button">
            Initial Application
          </button>
          <div id="a2" aria-hidden="true" class="usa-accordion-content sba-u-padding--0">
            <fieldset class="sba-c-facet-set sba-c-fieldset sba-c-fieldset--inputs">
              <legend class="sba-c-facet-set__legend sba-c-facet-set__legend--l2">Status</legend>
              <ul class="sba-c-unstyled-list">
                <li>
                  <input class="sba-c-checkbox" id="ar3-1" type="checkbox" name="ar">
                  <label class="sba-c-label" for="ar3-1">Screening</label>
                </li>
                <li>
                  <input class="sba-c-checkbox" id="ar3-2" type="checkbox" name="ar">
                  <label class="sba-c-label" for="ar3-2">Processing</label>
                </li>
              </ul>
            </fieldset>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</fieldset>

Facet pills

Facet pills are a list of pills that represent applied facets to a list.

<div class="sba-c-facet-pills">
  <span class="sba-c-facet-pill">
    Baltimore
    <button class="sba-c-facet-pill__close-button" type="button" title="Close">X</button>
  </span>
  <span class="sba-c-facet-pill">
    Inital Application - Screening
    <button class="sba-c-facet-pill__close-button" type="button" title="Close">X</button>
  </span>
  <span class="sba-c-facet-pill">
    HubZone
    <button class="sba-c-facet-pill__close-button" type="button" title="Close">X</button>
  </span>
  <button class="sba-c-facet-pills__reset" type="button">Clear all</button>
</div>

Guidance

• Facet pills should be grouped on the page close to results.
• With each filter selector selected, a URL parameter that corresponds with the facet should be added to the URL so that the user may bookmark a particular search.
• Clicking the close "X" removes the applied facet, the item clicked, and the corresponding URL parameter