8.6 Released with 🥽 visionOS support and more!
Check it out

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

xml
<SearchBar hint="Search..." />

Props ​

hint ​

ts
hint: string

Gets or sets the placeholder text for the input area.

text ​

ts
text: string

Gets or sets the value of the search query.

textFieldBackgroundColor ​

ts
textFieldBackgroundColor: Color

Gets or sets the background color of the input area.

See Color.

textFieldHintColor ​

ts
textFieldHintColor: Color

Gets or sets the color of the placeholder text.

See Color.

...Inherited ​

For additional inherited properties, refer to the API Reference

Events ​

textChange ​

ts
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.

submit ​

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

Emitted when the search text is submitted.

clear ​

ts
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.

Native component ​