# Search The product search: a field in the middle of the screen, with results as the person types, one per line. ## Playground ```html ``` ## 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 ```html ``` ## Anatomy 1. **Field:** with the magnifier and Close on the same line. 2. **Results:** one per line, the name and the area; the first already marked. 3. **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 `