Navigation / Narrow the list
Facets
Combine kinds and states to filter a large listing without leaving the page.
Basic usage
- SELECT id FROM posts
- SELECT name FROM users
- INSERT INTO events (name) VALUES (:name)
No matching items.
HTML
<div class="facets" data-dd-facets="#facet-items" data-dd-facet-url="off" data-dd-empty="#facet-empty" data-dd-enhance hidden>
<div class="facet-group">
<button class="chip facet tone-blue" data-dd-facet="kind:select">SELECT <span class="facet-count">2</span></button>
<button class="chip facet tone-violet" data-dd-facet="kind:insert">INSERT <span class="facet-count">1</span></button>
</div>
<button class="btn" data-dd-facet-clear>Clear</button>
<span class="facet-shown" aria-live="polite"></span>
</div>
<ul class="rows" id="facet-items">
<li class="row" data-dd-kind="select">SELECT id FROM posts</li>
<li class="row" data-dd-kind="select">SELECT name FROM users</li>
<li class="row" data-dd-kind="insert">INSERT INTO events (name) VALUES (:name)</li>
</ul>
<p class="empty" id="facet-empty" hidden>No matching items.</p>Classes & attributes
| Class / attribute | Purpose |
|---|---|
data-dd-facets | A selector for the list to filter. Requires the optional script. |
data-dd-facet="kind:select" | A condition and value, matched by data-dd-kind="select" on the row. |
data-dd-facet-search / data-dd-facet-clear | A text search field, or a button that clears conditions. |
data-dd-empty | A selector for the no-results message. |
data-dd-facet-url="off" | Disables saving conditions in the URL, useful for embedded examples. |
Usage notes
Values within one group are ORed; different groups are ANDed. Display counts and selected states. Without JavaScript, every row remains readable.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.