Skip to content
Pinky UI

mobile

Long-Press Selection

Long press enters batch selection with tactile-ready state language, while tap, check buttons and keyboard remain complete paths.

  • mobile
  • selection
  • long press
  • batch
  • touch
Related pattern

Selection is a mode change with a lower action tray, not a hidden hover affordance.

Live preview

Tap or hold a row to select it.

Quick usage

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

<LongPressSelection items={items} onAction={moveItems} />

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

Long-Press Selection turns a sustained press on a row into a batch-selection mode. Tap, visible check state, keyboard activation and a lower action tray make selection understandable without hover.

Use when

  • A collection needs multi-select but should not show checkboxes at rest.
  • The selection mode has a small, local set of batch actions.

Interaction

Tap or hold an item to select it. Select more items, use Move, or Cancel the mode. The selected count and pressed state update immediately.

Accessibility

Use aria-pressed on each selectable button and expose the action region as a toolbar. Long press must enhance, never replace, the tap and keyboard path.

Reduced motion

Enter selection mode immediately without press compression or tray travel.

Tune

  • Keep the long-press duration consistent with the product's other hold gestures.
  • Make the selected count and destructive consequences explicit.
Open this skill on its own page