Introduction Foundations Components Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Checkbox card Checkbox Currency input Date input Date range calendar File select Input Label Location input Multi select Multiple location input Otp input Phone input Radio Search Segmented date input Select Slider Smart textarea Textarea Timepicker Toggle

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Components Forms Search

Search

General purpose search with optional rich results rendered from item templates

Contents

Default
Background color
Borderless
Expandable
Round corners
With custom control
With debounce time
With scrollable search results
Without result display
No inputs set

The field uses the search icon by default. Set leftIcon to another supported icon when the control should read as a different kind of search (e.g., AI-assisted search contexts).

Default

Sparkle

Inputs in With custom left icon
leftIcon ?: InputIconStart = 'ui-search'
Also set in this example
placeholder ?: any = $localize`Search`
Outputs
clear ?: any = new EventEmitter<void>()
expandedChange ?: any = new EventEmitter<boolean>()

Exposes the expanded/collapsed status of the expandable search bar.

onBlur ?: any = new EventEmitter<void>()
onFocus ?: any = new EventEmitter<void>()
overlayClose ?: any = new EventEmitter<void>()
query ?: any = new EventEmitter<string>()
select ?: any = new EventEmitter<SearchItem>()
submit ?: any = new EventEmitter<void>()