Search
A search box with a clear button, an optional “/” shortcut and optional suggestions as people type.
- CSS
css/components/search.css- JS
js/components/search.js
01 — Variants
With suggestions
Type “D” or “N”. Press / anywhere on the page to jump to it, and Esc to clear it.
Quiet
.search--quiet shows no box until hover or focus, for dense toolbars.
02 — Behavior
Script
| Name | Detail |
|---|---|
| Suggestions | With data-suggestions it becomes a combobox: ↑ ↓ move, Enter picks. Set them later with form.jewelSearch.setSuggestions([…]). |
jewel:searchinput | As the person types. |
jewel:search | On Enter or a pick. Detail { query }. Without an action, the form doesn’t leave the page. |
03 — Usage
Use it for
- Finding one thing among many: photos, posts, people.
- A placeholder that says what’s searched.
Avoid
- Narrowing a short list. Use a filter.
- Hiding search behind an icon on wide screens.
04 — Accessibility
Notes
- A
role="search"landmark with a visually hidden label. - When results change, update a polite live region (“12 results”). The script doesn’t guess the wording.
05 — Without Jewel’s JS
What the script does
The script shows the clear button, handles Esc and the “/” shortcut, and turns the box into a combobox when there are suggestions. The CSS reads only the markup below, so a framework can set it itself and leave out search.js and data-component.
| State | Set this | Notes |
|---|---|---|
| Has text | Remove hidden from .search__clear | Keep it hidden while the box is empty. Showing it also hides the “/” hint. |
| Suggestions | <ul class="search__suggestions" role="listbox"> in the form, hidden when closed | Each option is <li class="search__option" role="option" aria-selected="false"> with an id. Wrap the matching part in <mark>. |
| Combobox | role="combobox", aria-autocomplete="list", aria-controls (the list’s id) and aria-expanded on .search__input | Only when there are suggestions. |
| Highlighted option | aria-selected="true" on the option, and its id in the input’s aria-activedescendant | Focus stays in the box. |
| Disabled | disabled on .search__input | Dashed and dimmed. |
Events and keyboard
- ↓ opens the suggestions and moves down, ↑ moves up (both wrap), and Enter picks the highlighted one.
- Esc closes the suggestions; with them closed, it clears the box; with the box empty, it leaves the field. The × clears the box and puts focus back in it.
- “/” outside a text field focuses the box, when the form has a
.search__key. - Call
preventDefault()onpointerdownin the list so focus stays in the box, and close the list on blur. jewel:searchinputandjewel:searchdon’t fire without the script. A form without anactionneedspreventDefault()on submit.