Search

Material Design 3 search input with suggestions, keyboard navigation, and full-screen search mode. Not intended as a permanent filter panel for dense faceted workflows.

Basic Usage

Use the default bar variant for common in-page search input. This keeps query entry lightweight while preserving contextual suggestions.

<ds-search placeholder="Search..."></ds-search>

Initial Value

Pre-populate the component with an initial query.

<ds-search
  placeholder="Search products"
  value="Laptop"></ds-search>

Variants

Choose a variant that matches the search context.

Bar and View

Full-Screen

States

Use disabled and active states to reflect interaction context.

Interactive Example

Type to filter suggestions and review emitted events.

Event log:

API

Attributes

Attribute	Type	Default	Description
`variant`	string	`bar`	`bar`, `view`, `full-screen`.
`placeholder`	string	`Search`	Input placeholder text.
`value`	string	`""`	Current search value.
`active`	boolean	false	Applies active visual state.
`disabled`	boolean	false	Disables input and interactions.

Events

Event	Detail	Description
`ds-search:input`	`{ value }`	Fires when user types in the input.
`ds-search:clear`	`{}`	Fires when the clear button is activated.
`ds-search:submit`	`{ value }`	Fires on Enter when no suggestion is selected.
`ds-search:suggestion-select`	`{ suggestion, index }`	Fires when a suggestion is selected.

CSS Parts

Part	Description
`container`	Main search wrapper.
`input-container`	Input row container.
`input`	Input element.
`suggestions`	Suggestion listbox container.

Methods

Method	Description
`clear()`	Clears the input and suggestion list.
`filterSuggestions()`	Filters suggestions based on current value.
`selectSuggestion(index)`	Selects a suggestion by index.

CSS Custom Properties

Property	Description
`--ds-search-height`	Default control height (maps to global size tokens).
`--ds-search-icon-size`	Leading/trailing icon size.
`--ds-search-padding-inline`	Inline padding for the input container.

Accessibility

Input uses role="combobox" with listbox semantics.
aria-expanded reflects suggestion visibility.
Suggestions expose role="option" and selected state.
Focus stays in the input. ↓/↑ move the highlight, and aria-activedescendant points at the highlighted option so a screen reader announces it.
Enter picks the highlighted suggestion, or submits when none is highlighted. Escape closes the list and keeps focus in the input.

Usage Guidelines

Use variant="bar" for compact app headers.
Use variant="view" for suggestion-heavy search experiences.
Use variant="full-screen" when search is a primary task.
Keep suggestions relevant and limited to top matches.