Skip to main content

​
Overview

The SearchBar component provides a reusable search interface with a text input, search button, and optional clear button. It supports keyboard navigation and custom styling.

​
Import

import SearchBar from "../components/SearchBar";

​
Props

​
onSearch
(query: string) => void
required
Callback function triggered when the user submits a search. Receives the trimmed search query as a parameter.
​
placeholder
string
Placeholder text displayed in the search input field.
​
initialValue
string
default:""
Initial value to populate the search input.
​
className
string
default:""
Additional CSS classes to apply to the container div.
​
buttonClassName
string
default:""
Additional CSS classes to apply to the search button.
​
inputClassName
string
default:""
Additional CSS classes to apply to the input field.
​
showClearButton
boolean
default:false
Whether to display a clear button when the input has content.
​
onClear
() => void
Optional callback function triggered when the clear button is clicked.

​
Features

​
Search Button States

The search button automatically handles different states:
  • Enabled: When input has content (red background, white text)
  • Disabled: When input is empty (gray background, disabled state)

​
Keyboard Support

  • Press Enter in the input field to trigger search
  • Tab navigation between input and buttons
  • Full keyboard accessibility

​
Clear Functionality

When showClearButton={true}:
  • Clear button appears only when input has content
  • Clicking clear resets the input and calls onClear callback
  • Button has gray styling to differentiate from primary search action

​
Usage Examples

import SearchBar from "../components/SearchBar";
import { useState } from "react";

function PropertySearch() {
  const [results, setResults] = useState([]);

  const handleSearch = (query: string) => {
    console.log("Searching for:", query);
    // Perform search logic here
    fetchProperties(query).then(setResults);
  };

  return (
    <div className="container mx-auto py-8">
      <SearchBar onSearch={handleSearch} />
      {/* Display results */}
    </div>
  );
}

​
Variants

The codebase includes two specialized variants:

​
ListingsSearchBar

A variant used on the listings page with a rounded, centered design. 
import ListingsSearchBar from "../components/ListingsSearchBar";

<ListingsSearchBar 
  onSearch={handleSearch}
  initialQuery={query}
/>
Key differences:
  • Circular/pill-shaped design (rounded-full)
  • Integrated search button positioned inside input
  • Form-based submission
See src/components/ListingsSearchBar.tsx:1 for implementation.

​
HomePageSearchBar

A variant designed for the homepage with automatic navigation to the listings page. 
import HomePageSearchBar from "../components/HomePageSearchBar";

<HomePageSearchBar />
Key differences:
  • No props required (fully self-contained)
  • Automatically navigates to /propiedades on search
  • Uses parseQueryToFilters to convert search text into filter parameters
  • Large, centered design optimized for hero sections
See src/components/HomePageSearchBar.tsx:1 for implementation.

​
Styling

Default styles include:
  • Flexbox layout with gap spacing
  • Red color scheme for primary actions (red-800 for button)
  • Gray borders and focus states
  • Ring-based focus indicators
  • Smooth transitions for all state changes

​
Accessibility

  • Input has aria-label="Buscar propiedades"
  • Button has aria-label="Buscar propiedades"
  • All interactive elements have tabIndex={0}
  • Disabled state properly handled
  • Semantic HTML structure

​
Dependencies

  • lucide-react - For the Search icon
  • react - For state management (useState hook)

​
Source Code

View the full implementation at src/components/SearchBar.tsx:1

Build docs developers (and LLMs) love

Get started for freeTalk to us