Input & controls

Swipe Actions / Swipe Cell

Q: How do people describe a Swipe Actions / Swipe Cell in plain words?

swipe a row left to reveal Delete like in Mail or Messages slide a list item to show hidden action buttons half-swipe and it snaps back if I don’t go far enough

Q: How do I implement a Swipe Actions / Swipe Cell?

Add swipe actions on list rows: lock gesture axis in the first 10px, reveal trailing actions with spring snap past threshold, close other open rows, support full-swipe delete optionally, and expose the same actions in a keyboard-accessible menu.

Horizontal swipe on a list row reveals hidden actions—standard mobile list gesture.

Also known as swipe to delete · leading trailing actions · mail swipe

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Swipe Actions / Swipe Cell".

Add swipe actions on list rows: lock gesture axis in the first 10px, reveal trailing actions with spring snap past threshold, close other open rows, support full-swipe delete optionally, and expose the same actions in a keyboard-accessible menu.

Anatomy:
- cell / item: The row that translates.
- action buttons: Destructive usually farthest in (harder to hit).
- threshold: Past halfway snaps open; under snaps closed.
- full swipe: Flick all the way to commit immediately (Mail delete).

Preferred API / pattern: `react-swipeable-list / custom gesture`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Horizontal swipe and vertical scroll fight
○Avoid: Multiple rows open at once
○Avoid: Swipe-only delete with no menu alternative
○Avoid: Actions under the home indicator without safe-area padding.

In plain wordsHow people search for it

“swipe a row left to reveal Delete like in Mail or Messages”“slide a list item to show hidden action buttons”“half-swipe and it snaps back if I don’t go far enough”

AnatomyOpen for part names

cell / item: The row that translates.
action buttons: Destructive usually farthest in (harder to hit).
threshold: Past halfway snaps open; under snaps closed.
full swipe: Flick all the way to commit immediately (Mail delete).

How to write itOpen for stack patterns

Web (HTML/CSS)pointer/touch + transform (no native)

React + Tailwind + shadcn/uireact-swipeable-list / custom gesture

SwiftUIswipeActions(edge:allowsFullSwipe:)

Ant Designmobile List custom; desktop rarely used

Notes

Mobile-first (iOS Mail, Android lists, RN). Gesture arbitration: lock axis in the first ~10px so horizontal swipe doesn’t scroll the list. Only one row open at a time. Undiscoverable affordance—consider always-visible overflow menus on desktop. Provide non-gesture equivalents for a11y.

Common mistakesHumans and models trip here

Horizontal swipe and vertical scroll fight: no axis lock.
Multiple rows open at once: close the previous when opening another.
Swipe-only delete with no menu alternative: keyboard/AT users are stuck.
Actions under the home indicator without safe-area padding.

More failure symptoms on AI broke it.

Related patterns

Pull to RefreshPull a list past a threshold from the top to trigger a reload—mobile muscle memory.Dropdown MenuA compact menu of actions or options revealed from a trigger control.Spring AnimationMotion driven by stiffness and damping instead of a fixed duration curve—naturally overshoots, then settles.Toast / SnackbarA brief, non-blocking status bar that appears after an action and dismisses itself.

Spotted a wrong name or missing pattern?

Message on X