Lucent UI
← NavMenuFilterSearchFilterSelect →
✦ LLM-ready

FilterSearch

molecule

Collapsible search button that expands to a text input on click and collapses back when blurred empty. Designed for filter bars and toolbars where space is tight.

"Add a FilterSearch from lucent-ui for a toolbar. It shows as an icon button and expands to a search input on click."

Usage

React / JSX
import { FilterSearch } from 'lucent-ui'

<FilterSearch placeholder="Search…" variant="secondary" size="md" width={260} />

Installation

pnpm add lucent-ui

API Reference

FilterSearch props — * required

PropTypeDefaultDescription
valuestring—Controlled search value.
defaultValuestring—Initial value for uncontrolled usage.
onChange(value: string) => void—Called with the current search string.
placeholderstring"Search…"Input placeholder text.
variant"secondary" | "outline""secondary"Button style when collapsed.
size"sm" | "md" | "lg""md"Button and input size.
widthnumber260Width of the expanded input in pixels.
disabledbooleanfalseDisables the button.
styleReact.CSSProperties—Inline styles for the wrapper.