Appearance

Search Bar ​

The SearchBar component includes a text input and a search button. It has presets and utilities geared towards searching a database or other list of items.

Basic Usage ​

The SearchBar component emits the @search event when the search button is clicked or the enter key is pressed. The search query is passed to the event handler.

Search for Jane or John
Data: [
  {
    "id": 1,
    "name": "John Doe"
  },
  {
    "id": 2,
    "name": "Jane Doe"
  },
  {
    "id": 3,
    "name": "John Smith"
  }
]
vue
<script setup lang="ts">
  import { ref } from 'vue';

  import SearchBar from '../../../src/components/SearchBar/SearchBar.vue';

  interface Data {
    id: number;
    name: string;
  }

  const apiData: Data[] = [
    {
      id: 1,
      name: 'John Doe',
    },
    {
      id: 2,
      name: 'Jane Doe',
    },
    {
      id: 3,
      name: 'John Smith',
    },
  ];

  const searchTerm = ref('');
  const isLoading = ref(false);
  const responseData = ref(apiData);

  async function fetchData() {
    if (isLoading.value) return;

    isLoading.value = true;

    // mocked backend code
    const response = await new Promise<Data[]>((resolve) =>
      setTimeout(() => {
        const filteredData = apiData.filter((item) => item.name.toLowerCase().includes(searchTerm.value.toLowerCase()));
        resolve(filteredData);

        isLoading.value = false;
      }, 1000),
    );

    responseData.value = response;
  }

  function onSearch() {
    fetchData();
  }
</script>

<template>
  <SearchBar
    v-model="searchTerm"
    label="Search"
    hint-text="Search for Jane or John"
    :is-loading="isLoading"
    @search="onSearch"
  />

  <pre class="tw-mt-4">Data: {{ JSON.stringify(responseData, null, 2) }}</pre>
</template>

Loading State ​

The is-loading prop will disable the search button when if set to true and won't emit the @search event.

Search for Jane or John
Data: [
  {
    "id": 1,
    "name": "John Doe"
  },
  {
    "id": 2,
    "name": "Jane Doe"
  },
  {
    "id": 3,
    "name": "John Smith"
  }
]
vue
<script setup lang="ts">
  import { ref } from 'vue';

  import SearchBar from '../../../src/components/SearchBar/SearchBar.vue';

  interface Data {
    id: number;
    name: string;
  }

  const apiData: Data[] = [
    {
      id: 1,
      name: 'John Doe',
    },
    {
      id: 2,
      name: 'Jane Doe',
    },
    {
      id: 3,
      name: 'John Smith',
    },
  ];

  const searchTerm = ref('');
  const isLoading = ref(true);
  const responseData = ref(apiData);

  async function fetchData() {
    isLoading.value = true;

    // mocked backend code
    const response = await new Promise<Data[]>((resolve) =>
      setTimeout(() => {
        const filteredData = apiData.filter((item) => item.name.toLowerCase().includes(searchTerm.value.toLowerCase()));
        resolve(filteredData);

        isLoading.value = false;
      }, 1000),
    );

    responseData.value = response;
  }

  function onSearch() {
    fetchData();
  }
</script>

<template>
  <SearchBar
    v-model="searchTerm"
    label="Search"
    hint-text="Search for Jane or John"
    :is-loading="isLoading"
    @search="onSearch"
  />

  <pre class="tw-mt-4">Data: {{ JSON.stringify(responseData, null, 2) }}</pre>
</template>

Working State ​

The is-working prop will display a loading icon if set to true, indicating that the search is in progress.

html
<SearchBar :is-working="true" />

Hint Slot ​

When the hint text is a simple string, the hint-text prop can be used. However, if you need to add custom HTML to the hint text, the hint slot can be used.

Sale!
html
<SearchBar>
  <template #hint>
    <span class="tw-text-teal-500">Sale! <Icon name="tag" size="small" /></span>
  </template>
</SearchBar>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.