Search
The product search: a field in the middle of the screen, with results as the person types, one per line.
On this page
Playground
Results
Background
<dialog open class="feitio-dialog search-dialog search-sample" id="pg-search" aria-labelledby="pg-search-t"><form method="dialog"><h2 id="pg-search-t" class="feitio-visually-hidden">Search Feitio</h2><div class="search-head"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-search"></use></svg><label class="feitio-visually-hidden" for="pg-search-field">Search Feitio</label><input class="search-field" id="pg-search-field" type="search" autocomplete="off" placeholder="Button, color…"><button type="submit" class="feitio-button close" data-size="small" value="close"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Close</button></div><ul class="results"><li><a href="#playground" data-active><strong>Table</strong><small>Components</small></a></li><li><a href="#playground"><strong>Tokens</strong><small>Development</small></a></li></ul><p class="foot"><span><kbd class="feitio-kbd">↵</kbd> opens the first</span><span><kbd class="feitio-kbd">↑</kbd><kbd class="feitio-kbd">↓</kbd> choose</span><span><kbd class="feitio-kbd">Esc</kbd> closes</span></p></form></dialog>When to use
- In a product or documentation with many pages, where finding things through the menu takes long.
When not to use
- To filter a list on the screen: a filter field above it, as in the catalogs.
- With few pages: the menu is enough.
Examples
This site’s search
Tap the button, or press / or Ctrl + K.
Show code
<button type="button" class="feitio-button" data-open-search>…Buscar</button>
<dialog class="feitio-dialog search-dialog" aria-labelledby="busca-t">
<form method="dialog">
<div class="search-head">…<input class="search-field" type="search">…</div>
<ul class="results">…</ul>
<p class="foot">…</p>
</form>
</dialog>Anatomy
- Field: with the magnifier and Close on the same line.
- Results: one per line, the name and the area; the first already marked.
- Keys: what each one does.
States
- Open: in the middle of the screen, a bit above center; a tap outside closes it, because searching decides nothing.
- Typing: results change with each letter; Enter opens the first and the arrows move through the list.
- Nothing found: says so and suggests another word.
Where the results come from
The index is built when the site is published, from every page (with Pagefind, which runs without a server). In this draft, the list is written by hand.
Accessibility
- It is a named Dialog; focus starts in the field.
- The results are links: Tab, arrows and Enter work.
Attributes
| Attribute | Values | What for |
|---|---|---|
data-open-search | on the opening button | Opens the search. |
class="feitio-dialog search-dialog" | on the <dialog> | The search, which closes with a tap outside. |
class="results" | the list | One result per line. |