Skip to content
Pinky UI

mobile

Inline Search Reveal

A search icon reflows the local header into an inline field without reserving a permanent desktop search row.

  • mobile
  • search
  • inline
  • reflow
  • focus
Related pattern

The field enters the content header itself, pushing nearby content rather than opening a viewport overlay.

Live preview

Saved notes

Quick usage

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

<InlineSearchReveal title="Saved notes" 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

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

Inline Search Reveal lets a compact search icon become a field inside the local header. Nearby content reflows naturally, so a mobile screen does not reserve desktop-density search space at rest.

Use when

  • A page has a short title and occasional local search.
  • Search should push content instead of covering it.

Interaction

Tap the icon to replace the title row with an input. Type, press Escape or Cancel, and return focus to the icon.

Accessibility

Give the icon a descriptive accessible name and the input a real label. Keep the title available as context when the input is open.

Reduced motion

Swap the title and field immediately while retaining the same DOM order and focus path.

Tune

  • Use a short placeholder that names the searchable collection.
  • Do not use this for a full search destination with complex filters.
Open this skill on its own page