Skip to content
Pinky UI

mobile

Search + Filter Morph

Search and filter chips emerge from one compact surface so refinement does not break the current reading context.

  • mobile
  • search
  • filters
  • chips
  • morph
Related pattern

The query and filter states share one mobile surface instead of becoming two disconnected controls.

Live preview

Tap once to search, then refine the same surface.

Quick usage

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

<SearchFilterMorph filters={filters} 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

  • 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

Search + Filter Morph keeps query and refinement in one compact mobile surface. Search opens first, then filter chips appear in the same context instead of sending the user to a second control layer.

Use when

  • A collection needs both text search and a small set of mutually exclusive filters.
  • Refinement should remain attached to the current result context.

Interaction

Tap Search to reveal the input, choose a filter chip and press Cancel or Escape to restore the compact row. The selected filter remains visible when the row is closed.

Accessibility

Use a labelled input and a group of pressed buttons for filters. Do not encode the selected filter through colour alone.

Reduced motion

Reveal the input and chips without reflow animation; preserve the selected filter and query.

Tune

  • Keep filters horizontally scrollable inside their own row.
  • Use a single selection model unless the product genuinely needs multi-select.
Open this skill on its own page