Skip to content
Pinky UI

mobile

Search Morph Header

Morphs a quiet mobile header into an autofocus search field and returns focus to the trigger when closed.

  • mobile
  • search
  • header
  • morph
  • focus
Related pattern

Search owns the header region on demand instead of opening a detached desktop-style panel.

Live preview

Quick usage

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

<SearchMorphHeader title="Explore" 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 a search morph header when a mobile screen has a quiet title at rest and search deserves the same spatial region only after intent.

Interaction anatomy

  • A labelled trigger becomes an autofocus input.
  • Escape and Cancel close the input.
  • Focus returns to the original trigger.

Good for

Collection pages, feeds and small mobile shells with one primary search task.

Avoid

Multiple simultaneous search scopes or command-heavy workflows that need a full palette.

Live example

Open Search, type a query and press Escape to restore the header.

Usage

tsx
<SearchMorphHeader title="Explore" onQueryChange={setQuery} />

Tune

Keep the placeholder specific, preserve the title when closed and make the input wide enough for real queries.

Accessibility and reduced motion

Use a labelled search region, native input and restored focus. Reduced motion changes the header immediately while keeping the same focus path.

Open this skill on its own page