Search

Combine role="search" with a <fieldset> to create a stylized search input with proper semantics and accessibility.

Screen readers expose it as a "search" landmark, allowing users to jump directly to the search form.

Basic Usage

<fieldset role="search">
  <input type="search" placeholder="Search..." />
  <button type="submit">Search</button>
</fieldset>

Filter Search

<fieldset role="search">
  <select aria-label="Category">
    <option>All Categories</option>
    <option>Products</option>
    <option>Services</option>
    <option>Support</option>
  </select>
  <input type="search" placeholder="Search..." />
  <button type="submit">Go</button>
</fieldset>