List row that swipes open to reveal actions, snaps by flick velocity, and deletes on a full swipe that stretches the action colour across the row.
Drag a row sideways to open the drawer, flick it, or swipe all the way to delete. The keyboard works through a hidden toggle button after the row.
| Prop | Type | Default | Description |
|---|---|---|---|
actions | SwipeAction[] | [{ id: 'delete', label: 'Delete' }] | The drawer, outermost first. Each has id, label, an optional icon (an Iconify name), an optional color for secondary actions, dismiss to fold the row when pressed, and onSelect. The first is the full-swipe action and always folds the row. |
actionColor | string | '#e5484d' | The full-swipe block that leaps and fills the row. |
drawerColor | string | '#3f3f46' | The drawer base and the secondary actions. |
rowColor | string | '#27272a' | The surface. |
textColor | string | '#f5f5f5' | Row text and the keyboard toggle. |
height | number | 64 | Row height in pixels. The fold closes from it. |
radius | number | 16 | Corner radius of the row and the clipped drawer. |
actionWidth | number | 80 | Width of each action in pixels, so the drawer width too. |
direction | 'left' | 'right' | 'left' | Which way you swipe. Everything mirrors. |
snapBounce | number | 0.2 | Overshoot of the open or close settle after a flick. Slow releases never bounce. |
resistance | number | 0.55 | How much of the finger the row keeps past the drawer, and the rubber-band beyond the commit point. |
collapseMs | number | 200 | How long a deleted row takes to fold shut. |
commitAt | number | 0.6 | Fraction of the row width the surface must uncover for the block to leap and a release to delete. |
fullSwipe | boolean | true | Off, the drawer is the end: no leap, no delete. |
disabled | boolean | false | Dims the row and ignores input. |
open | boolean | undefined | Controlled open state, usable with v-model:open. Outside changes settle the row. |
closeOnAction | boolean | true | Closes the drawer after an action is pressed. |
haptic | boolean | true | A short vibration on touch when the block leaps. |
label | string | 'List item' | Accessible name of the row. |
| Event | Description |
|---|---|
update:open | Emitted when a gesture or key opens or closes the drawer. |
open-change | Same moment as update:open, carrying the new boolean. |
action | Emitted when any action button is pressed, with the action. |
commit | Emitted after a full swipe or a press on a folding action, once the row has shut. Remove the row here. |
| Slot | Description |
|---|---|
default | The row content you drag. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| ArrowLeft + ArrowRight | On the hidden toggle, opens the drawer in the swipe direction and closes it in the other. |
| Enter + Space | Toggles the drawer. |
| Delete + Backspace | With the drawer open, runs the full-swipe action. |
| Escape | Closes the drawer. |