> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/33.searchbar.md).

# Searchbar

### Searchbar Props

| Name                       | Type             | Default                                                                               | Description                                             |
| -------------------------- | ---------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| clearButton                | boolean          | true                                                                                  | Adds input clear button                                 |
| colors                     | object           |                                                                                       | Object with Tailwind CSS colors classes                 |
| colors.inputBgIos          | string           | ''                                                                                    |                                                         |
| colors.inputBgMaterial     | string           | 'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'                 |                                                         |
| colors.placeholderIos      | string           | ''                                                                                    |                                                         |
| colors.placeholderMaterial | string           | 'placeholder-md-light-on-surface-variant dark:placeholder-md-dark-on-surface-variant' |                                                         |
| component                  | string           | 'div'                                                                                 | Component's HTML Element                                |
| disableButton              | boolean          | false                                                                                 | Adds button for cancel search and set its initial state |
| disableButtonText          | string           | 'Cancel'                                                                              | Disable button text                                     |
| inputId                    | string           |                                                                                       | Input id attribute                                      |
| inputStyle                 | CSSProperties    |                                                                                       | Additional input classes                                |
| placeholder                | string \| number | 'Search'                                                                              | Searchbar placeholder                                   |
| value                      | any              |                                                                                       | Searchbar value                                         |

### Searchbar Events

| Name    | Type        | Description                 |
| ------- | ----------- | --------------------------- |
| blur    | function(e) | `blur` event handler        |
| change  | function(e) | `change` event handler      |
| clear   | function(e) | Fired on clear button click |
| disable | function(e) | Fired on searchbar disable  |
| focus   | function(e) | `focus` event handler       |
| input   | function(e) | `input` event handler       |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="Searchbar">
      
      <template #subnavbar>
        <i-searchbar
          :value="searchQuery"
          disable-button
          disable-button-text="Cancel"
          @clear="handleClear"
          @disable="handleDisable"
          @input="handleSearch"
        >
        </i-searchbar>
      </template>
    </i-navbar>
    <i-list strong inset-material outline-ios>
      <i-list-item v-if="filteredItems.length === 0" title="Nothing found" />
      <i-list-item
        v-for="item in filteredItems"
        :key="item.title"
        :title="item.title"
      />
    </i-list>
  </i-page>
</template>
<script>
  import { ref, watch } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iSearchbar,
    iList,
    iListItem,
  } from 'ina-ui/vue';

  const items = [
    { title: 'FC Ajax' },
    { title: 'FC Arsenal' },
    { title: 'FC Athletic' },
    { title: 'FC Barcelona' },
    { title: 'FC Bayern München' },
    { title: 'FC Bordeaux' },
    { title: 'FC Borussia Dortmund' },
    { title: 'FC Chelsea' },
    { title: 'FC Galatasaray' },
    { title: 'FC Juventus' },
    { title: 'FC Liverpool' },
    { title: 'FC Manchester City' },
    { title: 'FC Manchester United' },
    { title: 'FC Paris Saint-Germain' },
    { title: 'FC Real Madrid' },
    { title: 'FC Tottenham Hotspur' },
    { title: 'FC Valencia' },
    { title: 'FC West Ham United' },
  ];

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iSearchbar,
      iList,
      iListItem,
    },
    setup() {
      const searchQuery = ref('');

      const handleSearch = (e) => {
        searchQuery.value = e.target.value;
      };

      const handleClear = () => {
        searchQuery.value = '';
      };

      const handleDisable = () => {
        console.log('Disable');
      };

      const filteredItems = ref(items);

      watch(searchQuery, () => {
        filteredItems.value = searchQuery.value
          ? items.filter((item) =>
              item.title.toLowerCase().includes(searchQuery.value.toLowerCase())
            )
          : items;
      });
      return {
        searchQuery,
        filteredItems,
        handleSearch,
        handleClear,
        handleDisable,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Searchbar,
  List,
  ListItem,
} from 'ina-ui/react';

const items = [
  { title: 'FC Ajax' },
  { title: 'FC Arsenal' },
  { title: 'FC Athletic' },
  { title: 'FC Barcelona' },
  { title: 'FC Bayern München' },
  { title: 'FC Bordeaux' },
  { title: 'FC Borussia Dortmund' },
  { title: 'FC Chelsea' },
  { title: 'FC Galatasaray' },
  { title: 'FC Juventus' },
  { title: 'FC Liverpool' },
  { title: 'FC Manchester City' },
  { title: 'FC Manchester United' },
  { title: 'FC Paris Saint-Germain' },
  { title: 'FC Real Madrid' },
  { title: 'FC Tottenham Hotspur' },
  { title: 'FC Valencia' },
  { title: 'FC West Ham United' },
];

export default function SearchbarPage() {
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearch = (e) => {
    setSearchQuery(e.target.value);
  };
  const handleClear = () => {
    setSearchQuery('');
  };
  const handleDisable = () => {
    console.log('Disable');
  };
  const filteredItems = searchQuery
    ? items.filter((item) =>
        item.title.toLowerCase().includes(searchQuery.toLowerCase())
      )
    : items;

  return (
    <Page>
      <Navbar
        title="Searchbar"
        subnavbar={
          <Searchbar
            onInput={handleSearch}
            value={searchQuery}
            onClear={handleClear}
            disableButton
            disableButtonText="Cancel"
            onDisable={handleDisable}
          />
        }
      />
      <List strong insetMaterial outlineIos>
        {filteredItems.length === 0 ? (
          <ListItem title="Nothing found" className="text-center" />
        ) : (
          filteredItems.map((item) => (
            <ListItem key={item.title} title={item.title} />
          ))
        )}
      </List>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/33.searchbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.