Skip to content
Pinky UI

search

Morph Search

A compact search trigger expands into an autofocus query surface and restores focus.

  • search
  • morph
  • focus

Live preview

Quick usage

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

<MorphSearch query={query} onQueryChange={setQuery} />

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

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use when a compact search trigger should become an active field without losing object identity or focus.

Use when

Header, toolbar, or collection search needs a quiet expansion and autofocus.

Avoid

Long result sets without a dedicated search page or a modal that merely fades in.

Accessibility

Label the search input, provide Clear and Close controls, and restore focus to the trigger on Escape.

Keyboard and touch

Support typing, Escape, clear, and a full-width touch field; never require a hover state.

Reduced motion and performance

Use layout/opacity only and keep filtering controlled by the host.

Composition and anti-patterns

Compose SearchResultsMorph for results; use CommandPalette for actions rather than mixing meanings.

Open this skill on its own page