search

Semantic landmark element for search functionality. Wraps search forms and controls to provide accessibility and structural meaning.

Description

The <search> element is a semantic landmark that identifies content related to searching or filtering. It's the recommended way to mark up search functionality, replacing the older pattern of <form role="search">.

As a landmark element, <search> allows screen reader users to quickly navigate to search functionality using landmark navigation.

When to Use

Site-wide search: Main search functionality in headers
Page search: Search within specific content (tables, lists)
Filter controls: Filter interfaces that narrow displayed content
Search results pages: Wrap the search input on results pages

When Not to Use

For login forms - use <form> with appropriate labels
For general data input - use standard form elements
Multiple search landmarks on one page (generally use only one)

Basic Examples

Simple Search Input

Search with Form

Wrap a form inside <search> for server-side search functionality.

<search> <form action="/search" method="get"> <label for="site-search" class="visually-hidden">Search</label> <input type="search" id="site-search" name="q" placeholder="Search..." /> <button type="submit">Search</button> </form> </search>

Variants

.inline

Search input with button side-by-side using flexbox.

<search class="inline"> <input type="search" placeholder="Search..." aria-label="Search" /> <button type="submit">Search</button> </search>

.compact

Smaller search for headers or sidebars.

.rounded

Pill-shaped search input.

.expanded

Full-width search input.

.header

Constrained width for header placement.

Site Logo Nav Items

.with-icon

Search with an icon inside the input.

Styling

CSS Implementation

search { display: block; } /* Inline variant */ search.inline { display: flex; gap: var(--size-xs); & > input { flex: 1; } } /* Expanded variant */ search.expanded { inline-size: 100%; & > input { inline-size: 100%; } } /* Compact variant */ search.compact { display: flex; gap: var(--size-2xs); & > input { padding-block: var(--size-xs); font-size: var(--font-size-sm); } & > button { padding-block: var(--size-xs); padding-inline: var(--size-s); font-size: var(--font-size-sm); } } /* Rounded variant */ search.rounded { & > input { border-radius: var(--radius-full); padding-inline: var(--size-m); } } /* Header variant */ search.header { max-inline-size: 300px; } /* With icon variant */ search.with-icon { position: relative; & > input { padding-inline-start: var(--size-xl); } & > svg, & > .icon { position: absolute; inset-inline-start: var(--size-s); inset-block-start: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; } }

Variant Classes Summary

Class	Description
`.inline`	Flexbox layout with input and button side-by-side
`.compact`	Smaller sizing for dense interfaces
`.rounded`	Pill-shaped input with full border radius
`.expanded`	Full-width search input
`.header`	Constrained max-width for header placement
`.with-icon`	Positioned icon inside the input

Form Patterns

GET Form for Server Search

Use GET method so search queries appear in the URL and can be bookmarked/shared.

<search> <form action="/search" method="get" class="inline"> <div class="group"> <label for="search-products" class="visually-hidden">Search products</label> <input type="search" id="search-products" name="q" placeholder="Search products..." /> </div> <button type="submit">Search</button> </form> </search>

Client-Side Filtering

For client-side filtering, omit the form and handle input events directly.

<search> <input type="search" placeholder="Filter results..." aria-label="Filter results" id="filter-input" /> </search> <script> const input = document.getElementById('filter-input'); input.addEventListener('input', (e) => { filterContent(e.target.value); }); </script>

Search with Additional Filters

Accessibility

Landmark Navigation

The <search> element is a landmark, meaning screen reader users can jump directly to it using landmark navigation. This replaces the older pattern of <form role="search">.

Labeling

Always provide a label for the search input. Options include:

Visible <label> element
Visually hidden <label> using .visually-hidden
aria-label attribute on the input

<label for="search">Search</label> <input type="search" id="search" />  <label for="search" class="visually-hidden">Search</label> <input type="search" id="search" />  <input type="search" aria-label="Search" />

input[type="search"] vs input[type="text"]

Always use type="search" for search inputs. It provides:

Clear button in some browsers
Appropriate keyboard on mobile (search button instead of enter)
Semantic meaning for assistive technologies
Search-specific styling opportunities

Multiple Search Landmarks

If a page has multiple search regions, use aria-label to distinguish them:

<search aria-label="Site search"> ... </search>  <search aria-label="Filter table results"> ... </search>

Keyboard Support

Key	Action
`Enter`	Submit the search form (when in form context)
`Escape`	Clear the search input (browser-dependent)

Related Elements

<input type="search"> - The search input element inside the search landmark
<form> - For wrapping search with server submission
<button> - Submit button for search forms
<nav> - Another landmark element (for navigation)

Browser Support

The <search> element is supported in all modern browsers. For older browsers, it degrades gracefully as a generic container while still functioning correctly.