Role Widget

`searchbox`

Marks an element as a text input scoped to a search task. Use <input type="search"> first — it provides clear-button affordances on most browsers and the search semantic for free. Reach for role="searchbox" only on a custom contenteditable search field.

When to use

Use <input type="search">. Browsers render a clear-input affordance, mobile keyboards switch to a “Search” return key, and the input is announced by screen readers as “search edit”.

role="searchbox" only appears in two cases:

A custom search input built on a contenteditable element (rich tokens, pasted images, complex query syntax).
Wrapping the entire search affordance in a <search> landmark or role="search" region, with the input inside still using the native type="search".

For autocomplete search, use role="combobox" on the search input and pair it with a role="listbox" of suggestions — searchbox itself does not own a popup.

Common failures

role="searchbox" on a button. The role is for the input, not the search-icon button next to it.
Search input with no accessible name. “Search” should be in a <label>, aria-label, or aria-labelledby — not only in the placeholder.
Building a search form without wrapping the input + button in a <search> landmark or role="search". Screen-reader users navigate by landmark and lose the affordance.
Using role="searchbox" for a “filter this table” input. That is not site-wide search; a plain textbox or combobox is more accurate.
Form posting on every keystroke without debouncing — fires assistive-tech announcements continuously.

Example

<search>
  <form role="search" action="/search">
    <label for="q">Search the site</label>
    <input id="q" type="search" name="q">
    <button type="submit">Search</button>
  </form>
</search>