Skip to content
Pinky UI

mobile

Bottom Search Sheet

A compact search pill rises into a keyboard-aware results sheet and returns to the same lower trigger.

  • mobile
  • search
  • sheet
  • keyboard
  • results
Related pattern

Search takes a bottom-sheet path for thumb reach and results continuity; it is not a Command Palette substitute.

Live preview

Quick usage

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

<BottomSearchSheet results={results} 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

Bottom Search Sheet turns a lower search pill into a keyboard-aware results surface. It keeps search close to the thumb while giving the query enough room to remain legible on a small screen.

Use when

  • Search is contextual to the current screen rather than the primary route.
  • Results need a little more room than an inline field provides.

Interaction

Tap the pill, type in the focused field and choose a result. Escape, Cancel, close and the backdrop all return to the original trigger.

Accessibility

Use a labelled dialog, a real input and readable result buttons. Restore focus to the trigger and announce result changes without making the entire page live.

Reduced motion

Open and close the sheet immediately; preserve query, result order and focus restoration.

Tune

  • Keep the result set short or virtualize it in a real product.
  • Account for the visual viewport and safe-area inset.
Open this skill on its own page