Skip to main content

​
Overview

The SearchInput component renders an input field that allows users to type a search query. It handles user interactions, emits relevant events, and integrates seamlessly with other search components in the Interface X library.

​
Installation

Import the SearchInput component from the search-box module: 
import { SearchInput } from '@empathyco/x-components/search-box'

​
Props

​
maxLength
number
default:"64"
Maximum characters allowed in the search input.
​
autofocus
boolean
default:"true"
Enables automatic focus when the search field is rendered.
​
instant
boolean
default:"true"
Enables auto-accept query after debounce period.
​
instantDebounceInMs
number
default:"500"
Debounce time in milliseconds for the instant search feature.

​
Events

The component emits the following events:
  • UserClickedSearchBox - Emitted when the user clicks the search input
  • UserBlurredSearchBox - Emitted when the search box loses focus
  • UserFocusedSearchBox - Emitted when the search box gains focus
  • UserIsTypingAQuery - Emitted when the user types or pastes into the search box
  • UserPressedEnterKey - Emitted when the user presses Enter
  • UserPressedArrowKey - Emitted when the user presses an arrow key
  • UserAcceptedAQuery - Emitted when a query is accepted (Enter key or after debounce)
  • UserHoveredInSearchBox - Emitted when the search box is hovered
  • UserHoveredOutSearchBox - Emitted when hover leaves the search box

​
Basic Usage

Here’s a simple example of using the SearchInput component: 
<template>
  <SearchInput />
</template>

<script setup>
import { SearchInput } from '@empathyco/x-components/search-box'
</script>

​
Customized Example

Customize the behavior with props: 
<template>
  <SearchInput 
    :maxLength="100" 
    :autofocus="false" 
    :instant="true" 
    :instantDebounceInMs="1000" 
  />
</template>

<script setup>
import { SearchInput } from '@empathyco/x-components/search-box'
</script>
Combine with other components for a full search experience: 
<template>
  <div class="search-container">
    <SearchInput />
    <ClearSearchInput>
      <img src="/assets/icons/cross.svg" />
    </ClearSearchInput>
    <SearchButton>Search</SearchButton>
  </div>
</template>

<script setup>
import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box'
</script>

​
Handling Events

Listen to events to create interactive experiences: 
<template>
  <div>
    <SearchInput
      @UserPressedEnterKey="handleEnter"
      @UserFocusedSearchBox="handleFocus"
      @UserIsTypingAQuery="handleTyping"
    />
    <p>Status: {{ status }}</p>
  </div>
</template>

<script setup>
import { SearchInput } from '@empathyco/x-components/search-box'
import { ref } from 'vue'

const status = ref('idle')

const handleEnter = (query) => {
  status.value = `Searching for: ${query}`
}

const handleFocus = () => {
  status.value = 'focused'
}

const handleTyping = (query) => {
  status.value = 'typing'
}
</script>
The SearchInput component automatically prevents special characters like < and > from being entered.

Search Module

Search module API reference

QuerySuggestions

Display autocomplete suggestions

Build docs developers (and LLMs) love

Get started for freeTalk to us