# Results bar

> The line above a catalog's results: the count as a status line, the sort, and the active filters as removable chips.

- Block class: `.hs-results-bar`
- CSS: `components/results-bar.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/directories-round.html
- Variants: Count and sort, With active filters
- HTML page: https://brand.honorsociety.org/components/results-bar/

## What it is

One bar between the [Filter](/components/filter/) panel and the results. The count and the sort share the first row. The active filters follow as removable chips, with a Clear all link. A hairline closes the bar.

## When to use

- Above the results of every catalog: the scholarship directory, the benefits list, site search.

## When not to use

- A list with no filter and no sort: a [Group heading](/components/group-head/) count is enough.
- Under a card grid, for "Showing 12 of 48": use [Load more](/components/load-more/).

## Rules

- Markup, in this order: `p.hs-results-bar__count[role="status"]`, `div.hs-results-bar__sort`, then an optional `ul.hs-results-bar__active`.
- The count is a number in `strong` plus the noun: "<strong>128</strong> scholarships". With a keyword: "<strong>12</strong> results for “nursing”". Code computes it; never type a count.
- The sort is `label.hs-label` + `select.hs-control` with `form="FORM-ID"` of the filter form, then `button.hs-button.hs-button--secondary.hs-button--sm.hs-results-bar__apply[data-hs-filter-apply]` "Sort". `filter.js` hides the button and submits on change.
- Each active filter is one `li` > `a.hs-chip.hs-results-bar__remove` to the current URL without that filter. The link text is `span.hs-visually-hidden` "Remove filter:" plus the value. The cross is drawn by CSS.
- The last `li` holds `a.hs-form-link` "Clear all" to the clean URL. Print the list only when a filter is set. On wide screens this is the only Clear all: the filter panel hides its own.
- Leave out the sort when the list has one useful order.

## Accessibility

- `role="status"` on the count: a screen reader announces the new total after a filter change.
- Each remove chip says "Remove filter: Graduate". The cross is `content: "×" / ""`, so it is not read.
- Chips are 40px tall; Clear all and the sort select are full tap targets.
- Count slate 6.2:1, number ink 13.0:1, chip ink 13.0:1 on white.

## Variants

### Count and sort

No filter set. The Sort button is for the no-JS page; this doc page loads no script, so it shows.

```html
<div class="hs-results-bar">
  <p class="hs-results-bar__count" role="status"><strong>1,003</strong> scholarships</p>
  <div class="hs-results-bar__sort">
    <label class="hs-label" for="sort-1">Sort by</label>
    <select class="hs-control" id="sort-1" name="sort" form="catalog-filter">
      <option value="">Name, A to Z</option>
      <option value="amount">Amount, highest first</option>
      <option value="new">Newest first</option>
    </select>
    <button class="hs-button hs-button--secondary hs-button--sm hs-results-bar__apply" type="submit" form="catalog-filter" data-hs-filter-apply>Sort</button>
  </div>
</div>
```

### With active filters

Two filters and a keyword. Each chip removes one filter.

```html
<div class="hs-results-bar">
  <p class="hs-results-bar__count" role="status"><strong>12</strong> results for &ldquo;leadership&rdquo;</p>
  <div class="hs-results-bar__sort">
    <label class="hs-label" for="sort-2">Sort by</label>
    <select class="hs-control" id="sort-2" name="sort" form="catalog-filter">
      <option value="">Name, A to Z</option>
      <option value="amount">Amount, highest first</option>
    </select>
    <button class="hs-button hs-button--secondary hs-button--sm hs-results-bar__apply" type="submit" form="catalog-filter" data-hs-filter-apply>Sort</button>
  </div>
  <ul class="hs-results-bar__active" aria-label="Active filters">
    <li><a class="hs-chip hs-results-bar__remove" href="/scholarship-directory?q=leadership&amp;type=fellowship"><span class="hs-visually-hidden">Remove filter: </span>Graduate</a></li>
    <li><a class="hs-chip hs-results-bar__remove" href="/scholarship-directory?q=leadership&amp;for=graduate"><span class="hs-visually-hidden">Remove filter: </span>Fellowship</a></li>
    <li><a class="hs-form-link" href="/scholarship-directory">Clear all</a></li>
  </ul>
</div>
```