Search field

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<search>
  <tui-search-field count="8" unit="run">
    <span class="tui-search-field__glyph" aria-hidden="true"><svg class="tui-icon" …></svg></span>
    <input class="tui-search-field__input" type="search" name="q" aria-label="Find a run" autocomplete="off">
    <output class="tui-search-field__count"></output>
    <button class="tui-search-field__key" type="button" data-search-clear></button>
  </tui-search-field>
</search>

<!-- A visible label above, as any field -->
<div class="tui-field">
  <label class="tui-label" for="q">Find a run</label>
  <tui-search-field>…</tui-search-field>
</div>

import { searchCountText } from '/kit/kit.mjs';

const field = document.querySelector('tui-search-field');
field.input.addEventListener('input', () => {        // typing, Clear and Escape all fire this
  const hits = runs.filter((r) => r.title.includes(field.input.value));
  render(hits);
  field.setAttribute('total', runs.length);
  field.count = hits.length;                          // prints "3 of 8 runs" and says it aloud
});

searchCountText(0, { unit: 'run' });                 // "No runs"
searchCountText(3, { total: 8, unit: 'run' });       // "3 of 8 runs"

Needs kit.css and kit.mjs. How to install the kit.

• The field is a native type="search" input with a visible label or an aria-label; wrap it in <search> (or a form with role="search") when it searches the whole page or site.
• The count is an <output>, a polite live region, so “3 of 8 runs” and “No runs” are said as the list changes without taking the focus.
• The clear key is a real button named “Clear search”, in the tab order after the field and only while there is text. Pressing it, or Escape, empties the field and leaves the focus in it.
• Escape clears only when there is something to clear, and then stops there, so a dialog around the field stays open until it is pressed a second time.
• The glass is printed, not pressed, and is hidden from a screen reader.
• On a phone the well is 48px tall with a 16px text size, so the page does not zoom, and the clear key is 44px. The 70ms press is switched off under reduced motion.

It is the field’s well, 38px high, with the glass printed on its floor and the count set behind the same engraved line the input group uses for its words. The clear key is a small cap inset three pixels from the wall, so its corner is the well’s less that gap. The native cross of a search input is turned off so there is one clear key, not two. The script keeps the key in step with the text, says the count aloud, and turns Escape into a clear; filtering is the page’s own job and listens for input.