Expand Search

Overview

ExpandableSearch renders as a small icon button that expands into a full search input when clicked. Supports search-as-you-type (fires on every keystroke) or manual search (fires on Enter). Used as the search overlay in SearchableContainer.

Installation

npx shadcn@latest add https://foodease-dev-registry.cap.reachcinema.io/r/v1/expand-search.json

Usage

Basic

import { ExpandableSearch } from "@/components/ui/expand-search"

export default function Toolbar() {
  return (
    <div className="flex items-center justify-end p-2">
      <ExpandableSearch
        onSearch={(query) => console.log("Search:", query)}
      />
    </div>
  )
}

Search As You Type

const [query, setQuery] = useState("")

<ExpandableSearch
  allowSearchAsYouType
  onSearch={setQuery}
  placeholder="Filter items..."
/>

When allowSearchAsYouType is true, clicking the icon again collapses the input and clears the query automatically.

Expand Direction

By default the input expands to the left. Change it to expand right:

<ExpandableSearch
  expandDirection="right"
  onSearch={setQuery}
  allowSearchAsYouType
/>

Custom Width When Expanded

Use className (which receives isExpanded: boolean) to override the expanded width:

<ExpandableSearch
  allowSearchAsYouType
  onSearch={setQuery}
  className={(isExpanded) => isExpanded ? "w-[40vw] min-w-[300px]" : ""}
/>

API Reference

Prop	Type	Default	Description
`onSearch`	`(query: string) => void`	—	Called with the search string
`placeholder`	`string`	`"Search..."`	Input placeholder
`expandDirection`	`"left" \| "right"`	`"left"`	Direction the input expands toward
`allowSearchAsYouType`	`boolean`	`false`	Fire `onSearch` on every keystroke. Also makes the icon button collapse/clear when clicked again
`className`	`(isExpanded: boolean) => string`	—	Dynamic class on the container
`iconClassName`	`string`	—	Extra classes on the icon button
`inputClassName`	`string`	—	Extra classes on the `<input>` element

Expand Search

On this page