# Swipeable Row

List row that swipes to reveal actions on either side. Pull far enough and the main action fills the row and runs when you let go; deleted rows fold away and only one row stays open.

> Composed · Pro · Mobile-Native — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/swipeable-row
```

## Import

```tsx
import { SwipeableRowGroup, SwipeableRowStrike, SwipeableRow } from "@/components/ui/swipeable-row/swipeable-row";
```

## Variants

- `inbox` — Inbox: `npx @lumioui/cli add pro/swipeable-row-inbox`
- `saved` — Saved items: `npx @lumioui/cli add pro/swipeable-row-saved`

## Props

### SwipeableRow

| Prop | Type | Notes |
| --- | --- | --- |
| `leftActions?` | `SwipeableAction[]` | Actions revealed when swiping right (shown on the left edge). The first one sits at the outer edge and is the full-swipe action. |
| `rightActions?` | `SwipeableAction[]` | Actions revealed when swiping left (shown on the right edge). The last one sits at the outer edge and is the full-swipe action. |
| `actionWidth?` | `number` | Width per action when the row rests open, in pt. Default 80. |
| `fullSwipe?` | `boolean | SwipeableRowSide` | Full swipe: dragging past ~58% of the row fills it with the outer action's colour (with a haptic exactly at the line, and a softer one if you pull back under it); letting go there commits that action. `true` for both sides, a side name for one, `false` to turn it off.  Default (not passed): on for a side only when its outer action is safe to fire without a confirmation, i.e. it is not `destructive` and has no `exit: "fold"`. A destructive outer action never full-swipes unless you opt in with `true` or that side's name, so an accidental long swipe can't cancel, delete or sign out. |
| `onOpenChange?` | `(side: SwipeableRowSide | null) => void` | Called when the row opens to a side or closes (`null`). |
| `accessibilityLabel?` | `string` | Give the row a screen-reader name to make the whole row one accessible element that carries every swipe action in its actions rotor. Without it the row stays a plain container and its children keep their own accessibility (the actions are still attached to the container). |
| `children?` | `React.ReactNode` | — |
| `className?` | `string` | — |
| `style?` | `StyleProp<ViewStyle>` | — |

### SwipeableRowGroup

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |

Source: https://lumioui.com/components/swipeable-row