Skip to content
Pinky UI

forms

Expanding Search

A compact search intent expands into an autofocus query surface without leaving the current layout.

  • forms
  • search
  • expand
  • focus

Live preview

Quick usage

usage
import { ExpandingSearch } from "@pinky-ui/systems";

<ExpandingSearch value={query} onValueChange={setQuery} results={results} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
resultsReactNode—Optional result surface rendered below the active query.
classNamestring—Styles the outer interaction surface.

Accessibility

  • The compact trigger exposes expanded state and opening moves focus to the labelled input.
  • Escape closes the field and restores focus; Clear and Close remain keyboard reachable.

Performance

  • Results mount only while the search surface is open; query changes do not run a pointer loop.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Toolbar and collection search where a full field would compete with content

When not to use

  • Primary search pages or command palettes with grouped keyboard actions

Skill

Purpose

A compact search intent expands into an autofocus query surface without leaving the current layout or pushing content around.

Good for

  • Toolbar and collection search where a full field would compete with content

Avoid for

  • Primary search pages or command palettes with grouped keyboard actions — use Command Palette instead

Usage

tsx
<ExpandingSearch value={query} onValueChange={setQuery} results={results} />

Accessibility

  • The compact trigger exposes expanded state and opening moves focus to the labelled input.
  • Escape closes the field and restores focus; Clear and Close remain keyboard reachable.

Performance

  • Results mount only while the search surface is open; query changes do not run a pointer loop.

Related: morph-search, command-palette.

Open this skill on its own page