Swipe Actions

When to use it

Use it for rows in a mail, message or task list where each row has two or three common actions (archive, pin, delete).

Do not hide the only route to an action behind a swipe: show the same action elsewhere (a detail page, a menu). Do not use more than three actions per side.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @tealmac-pro/swipe-actions
Copy

Usage

Props

Keyboard

• Left / Right (follows text direction): open actions on that side, focus the first.
• Tab: move through opened actions. Enter / Space: run one.
• Escape: close and return focus to the row.

Accessibility

• Dragging is never the only way: with focus in the row, the arrow key toward a side opens that side's actions and moves focus to the first one. This meets WCAG 2.5.7 (dragging movements).
• Closed actions are inert, so they are not in the tab order or the accessibility tree.
• A described-by hint tells screen reader users about the arrow keys.
• The slide is removed with prefers-reduced-motion.

Testing

The component ships with a Testing Library test (swipe-actions.test.tsx). jsdom cannot drag, so the test uses the keyboard route: arrows open each side, focus moves to the first action, Escape closes it, and an action runs its callback.