Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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
Simple search
<search> <input type="search" placeholder="Search..." aria-label="Search" /></search>Search with Form
Wrap a form inside <search> for server-side search functionality.
Search with form
<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.
Inline search
<search class="inline"> <input type="search" placeholder="Search..." aria-label="Search" /> <button type="submit">Search</button></search>.compact
Smaller search for headers or sidebars.
Compact search
<search class="compact inline"> <input type="search" placeholder="Quick search..." aria-label="Search" /> <button type="submit">Find</button></search>.rounded
Pill-shaped search input.
Rounded search
<search class="inline rounded"> <input type="search" placeholder="Search..." aria-label="Search" /> <button type="submit">Go</button></search>.expanded
Full-width search input.
Expanded search
<search class="expanded"> <input type="search" placeholder="Search the entire site..." aria-label="Search" /></search>.header
Constrained width for header placement.
Header search
<search class="header inline"> <input type="search" placeholder="Search..." aria-label="Search" /> <button type="submit" class="small">Go</button></search>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 |
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 { & > input, & > button { padding-block: var(--size-xs); font-size: var(--font-size-sm); }} /* Rounded variant */search.rounded > input { border-radius: var(--radius-full); padding-inline: var(--size-m);}Form Patterns
GET Form for Server Search
Use GET method so search queries appear in the URL and can be bookmarked/shared.
GET form search
<search> <form action="/search" method="get" class="inline"> <label for="search-products" class="visually-hidden">Search products</label> <input type="search" id="search-products" name="q" placeholder="Search products..." /> <button type="submit">Search</button> </form></search>Client-Side Filtering
For client-side filtering, omit the form and handle input events directly.
Client-side filter
<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>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-labelattribute on the input
Labeling options
<!-- Visible label --><label for="search">Search</label><input type="search" id="search" /> <!-- Hidden label (visible to screen readers) --><label for="search" class="visually-hidden">Search</label><input type="search" id="search" /> <!-- aria-label (no visible label element) --><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:
Multiple search landmarks
<!-- Main site search --><search aria-label="Site search"> ...</search> <!-- Table filter --><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
<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.