Filters
.filters
Filters — the bar of controls above a list, and the line that says what it did.
Examples
128 results
<form class="filters" aria-label="Filter the listings">
<search class="search filters-wide">
<label class="sr-only" for="f-q">Search</label>
<svg class="icon search-icon" aria-hidden="true"><use href="#icon-search"></use></svg>
<input class="input search-input" id="f-q" name="q" type="search"
placeholder="Chestnuts, Brescia, palio…" />
</search>
<fieldset class="field field-set">
<legend class="field-label">When</legend>
<div class="segmented">
<input class="segmented-input" id="f-any" name="when" type="radio" checked />
<label class="segmented-item" for="f-any">Any time</label>
<input class="segmented-input" id="f-week" name="when" type="radio" />
<label class="segmented-item" for="f-week">This week</label>
</div>
</fieldset>
<div class="field">
<label class="field-label" for="f-region">Region</label>
<select class="select" id="f-region">
<option>Every region</option>
<option>Lombardy</option>
</select>
</div>
</form>
<p class="filters-result cluster" data-active>
<span class="filters-count">128 results</span>
<span class="filters-tags cluster">
<button class="tag tag-removable" type="button">Lombardy<span class="sr-only"> — remove</span></button>
<button class="tag tag-removable" type="button">This week<span class="sr-only"> — remove</span></button>
</span>
<button class="btn btn-sm filters-edit" type="button">Clear filters</button>
</p>The summary is pinned only while data-active is on it: unfiltered it says "128 results" and a bar that follows you down the page to repeat the total is furniture.
The attribute is yours to set — whether a filter is active is a fact about data, and CSS cannot see it.
1,828 results
<p class="filters-result cluster">
<span class="filters-count">1,828 results</span>
<span class="filters-tags cluster"></span>
</p>The tag row is empty and therefore gone — :empty rather than a hidden attribute somebody has to remember to write. The line keeps its 2rem so the list under it does not jump when the first tag appears.
Tokens 9
Level 2, declared on .filters itself. Set any of them on that selector to restyle this block without touching the skin.
| Token | Default |
|---|---|
| --filters-count-color | var(--color-on-surface-muted) |
| --filters-count-font-size | var(--font-size-sm) |
| --filters-result-bg | var(--color-surface) |
| --filters-result-offset | 0 |
| --filters-result-padding-block | var(--space-3) |
| --filters-border-color | var(--color-border-subtle) |
| --filters-border-width | var(--border-width) |
| --filters-gap | var(--space-4) var(--space-6) |
| --filters-padding-block | var(--space-6) |
Variants and states
Variants
None. It is one shape, and the page does the rest.
Inside it
.filters-result.filters-tags.filters-count.filters-edit.filters-wide
State it reads
Read from the platform, never mirrored into a class that could disagree with it.
data-active
src/css/blocks/filters.css · npx mostlycss add filters