<SearchBar> is a UI component that provides a user interface for entering search queries.

<<< @/../examples/typescript/src/ui/SearchBar/template.xml#example

<<< @/../examples/angular/src/ui/SearchBar/component.html#example

<<< @/../examples/react/src/components/ui/searchbar.tsx#example

<<< @/../examples/solid/src/ui/searchbar.tsx#example

<<< @/../examples/svelte/app/components/ui/SearchBar.svelte#example

<<< @/../examples/vue/src/ui/SearchBar/component.vue#example

hint: string

Gets or sets the placeholder text for the input area.

text: string

Gets or sets the value of the search query.

textFieldBackgroundColor: Color

Gets or sets the background color of the input area.

See Color.

textFieldHintColor: Color

Gets or sets the color of the placeholder text.

See Color.

For additional inherited properties, refer to the API Reference

on('textChange', (args: PropertyChangeData) => {
  const searchBar = args.object as SearchBar
  console.log('Search query:', args.value)
})

Emitted when the search text is changed.

See PropertyChangeData.

on('submit', (args: EventData) => {
  const searchBar = args.object as SearchBar
  console.log('Search for:', searchBar.text)
})

Emitted when the search text is submitted.

on('submit', (args: EventData) => {
  const searchBar = args.object as SearchBar
  console.log('SearchBar cleared')
})

Emitted when the search input is cleared through the ✗ button in the input area.

• Android: android.widget.SearchView
• iOS: UISearchBar