Search View
Full-screen search experience with suggestions, recent searches, and filter chips following Material Design 3 patterns. Not intended for static browsing pages where inline filtering is sufficient.
Basic Usage
Create a closed search view and open it via a trigger. This pattern gives search dedicated focus without permanently occupying layout space.
<ds-search-view id="search-view-basic"></ds-search-view> <button id="open-basic">Open Search View</button>
Initial Value
Start with a predefined search value for contextual entry points.
<ds-search-view value="laptop"></ds-search-view>
Variants
Configure suggestions and filters based on search needs.
Suggestions Only
Suggestions + Filters
States
Search view supports closed and open interaction states.
Interactive Example
Open a configured search view and monitor component events.
Event log:
API
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
open |
boolean | false | Controls full-screen visibility. |
value |
string | "" |
Current input value shown in the search field. |
Events
| Event | Detail | Description |
|---|---|---|
ds-search-view:input |
{ value } |
Fires when input changes. |
ds-search-view:search |
{ query, filters } |
Fires when a search is submitted. |
CSS Parts
| Part | Description |
|---|---|
input |
Main search input element. |
filter |
Filter chip button. |
suggestion |
Suggestion row item. |
Methods
| Method | Description |
|---|---|
performSearch(query) |
Runs search and emits submit event. |
close() |
Closes the search overlay. |
clearRecentSearches() |
Clears persisted recent search values. |
CSS Custom Properties
| Property | Description |
|---|---|
--search-view-header-padding |
Header spacing (defaults to global spacing token). |
--search-view-close-size |
Close button size (defaults to global control token). |
--search-view-clear-size |
Clear button icon size (defaults to global icon token). |
Accessibility
-
The input is a
comboboxcontrolling alistboxof results (or recent searches). -
Focus stays in the input. ↓/↑ move the
highlight, and
aria-activedescendantpoints at the highlighted option so a screen reader announces it. - Escape closes the overlay from the search input.
- Interactive controls include accessible labels.
- Search and input events expose structured detail payloads.
Usage Guidelines
- Use for primary app-wide search workflows.
- Provide concise filter sets with clear category labels.
- Keep suggestions relevant and capped to top matches.
- Persist recent searches only when it benefits user recall.