---
title: SearchBar
description: SearchBar API.
---

import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';

<CodeSnippetMD imagePath="/src/assets/generated/searchbar.png" scale="3" imageWidth="300" imageHeight="200" imageAlt="">
```slint
import { SearchBar } from "@material";
export component Example inherits Window {
    width: 300px;
    height: 100px;
    background: transparent;
    SearchBar {
        placeholder-text: "Search...";
        width: 280px;
        height: 56px;
    }
}
```
</CodeSnippetMD>

A `SearchBar` is a text input field designed for search functionality, with optional leading/trailing icons and avatar.

## Properties

### avatar
<SlintProperty propName="avatar-icon" typeName="image">
An optional avatar image displayed in the search bar.
</SlintProperty>

### avatar-background
<SlintProperty propName="avatar-background" typeName="color" defaultValue="#00000000">
The background color for the avatar.
</SlintProperty>

### current-index
<SlintProperty propName="current-index" typeName="int" propertyVisibility="in-out">
The index of the currently selected search result item.
</SlintProperty>

### empty-text
<SlintProperty propName="empty-text" typeName="string">
Text displayed when there are no search results.
</SlintProperty>

### has-focus
<SlintProperty propName="has-focus" typeName="bool">
Whether the component has focus.
</SlintProperty>

### items
<SlintProperty propName="items" typeName="[struct]" structName="ListItem">
An array of search result items to display.
</SlintProperty>

### leading-icon
<SlintProperty propName="leading-icon" typeName="image">
The icon displayed at the start of the search bar.
</SlintProperty>

### placeholder-text
<SlintProperty propName="placeholder-text" typeName="string">
The placeholder text displayed when the search bar is empty.
</SlintProperty>

### text
<SlintProperty propName="text" typeName="string" propertyVisibility="in-out">
The current text in the search bar.
</SlintProperty>

### trailing-icon
<SlintProperty propName="trailing-icon" typeName="image">
The icon displayed at the end of the search bar.
</SlintProperty>

## Callbacks


### action-button-clicked(index: int)
Invoked when a search result item action is triggered.

### accepted(text: string)
Invoked when the user presses Enter in the search bar.

### edited(text: string)
Invoked when the text in the search bar changes.

### key-pressed(event: KeyEvent) -> EventResult
Invoked when a key is pressed in the search bar.

### key-released(event: KeyEvent) -> EventResult
Invoked when a key is released in the search bar.

### item-activated(index: int) -> bool
Invoked when a search item is clicked.  If a callback returns 'true', then do not perform the default behavior of changing the search text.

## Functions

### clear-focus()
Clears the focus from the component.

### focus()
Focuses the component.

### close-popup()
Closes the popup if open.