How to Implement Swipe-to-Delete in Jetpack Compose with Material 3 [2025]

In this tutorial, I'll show you how to create a simple swipeable list where you can delete items. By the end of this tutorial, you'll have a fully functional swipe-to-delete list. Let’s dive right into the code!

Watch the Video Tutorial

If you prefer a step-by-step walkthrough, watch the video tutorial below:

---

Step 1: Create a Simple List Using LazyColumn

We start by creating a list of items using LazyColumn. This component efficiently displays a large number of items in a scrolling list. In our example, we’ll use it to create a list where items can be swiped away.

Here's how we define the list:

val listItems = remember {
   mutableStateListOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5")
}
LazyColumn() {
    items(listItems) {
        item - >

            Text(
                modifier = Modifier
                .fillMaxWidth()
                .background(Color.White)
                .padding(vertical = 10. dp),
                text = item
            )
    }

}
  

---

Step 2: Modify the LazyColumn

Next, we will add some styling to the LazyColumn. Let's modify it to take full width and height:

LazyColumn(
    modifier = Modifier
    .fillMaxWidth()
    .padding(innerPadding)
    .background(Color.White)
) {
    items(listItems) {
        item - >

            Text(
                modifier = Modifier
                .fillMaxWidth()
                .background(Color.White)
                .padding(vertical = 10. dp),
                text = item
            )
    }

}
  

This gives us a basic list of items with a white background and some vertical padding.

---

Step 3: Introducing SwipeToDismissBox

Here’s where the magic happens! To implement the swipe-to-delete functionality, we’ll use the SwipeToDismissBox component to wrap each list item and handle the swipe action.

To get started, we need to create a state for each item to track the swipe status:

val dismissState = rememberSwipeToDismissBoxState()
  

Now, we’ll wrap our list item inside the SwipeToDismissBox like this:

SwipeToDismissBox(
    state = dismissState,
    backgroundContent = {
        /* Background content when swiped */ }
) {
    Text(
        modifier = Modifier
        .fillMaxWidth()
        .background(Color.White)
        .padding(vertical = 10. dp),
        text = item
    )
}
  

Make sure to opt-in for the experimental Material 3 APIs, as the SwipeToDismissBox is currently in experimental mode.

---

Step 4: Add Background Content

The background content will be visible when a user swipes away an item. In our case, the background will indicate the delete action:

Box(
    modifier = Modifier
    .fillMaxSize()
    .background(Color.Red)
    .padding(horizontal = 20. dp),
    contentAlignment = Alignment.CenterEnd
) {
    Text(text = "Delete")
}
  

When the user swipes an item from right to left, they will see a red background with the text "Delete."

---

Step 5: Handle Swipe Action and Remove Item

When the user swipes an item, we want to remove it from the list. We’ll handle this by checking the swipe state and confirming the action inside the rememberSwipeToDismissBoxState constructor:

confirmValueChange = {
    if (it == SwipeToDismissBoxValue.EndToStart) {
        listItems.remove(item)
        true
    } else {
        false
    }
}
  

This will dynamically remove the swiped item from the list.

---

Final Output

Now, run the application, and you’ll see a list of items. When you swipe an item from right to left, the red "Delete" background appears, and if you swipe it all the way, the item is removed from the list.

---

Full Code

val listItems = remember {
    mutableStateListOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5")
}

LazyColumn(
    modifier = Modifier
    .fillMaxWidth()
    .padding(innerPadding)
    .background(Color.White)
) {
    items(listItems) {
        item - >

            val dismissState = rememberSwipeToDismissBoxState(
                confirmValueChange = {
                    if (it == SwipeToDismissBoxValue.EndToStart) {
                        listItems.remove(item)
                        true
                    } else {
                        false
                    }
                }
            )

        SwipeToDismissBox(
            state = dismissState,
            backgroundContent = {
                Box(
                    modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Red)
                    .padding(horizontal = 20. dp),
                    contentAlignment = Alignment.CenterEnd
                ) {
                    Text(text = "Delete")
                }
            }
        ) {
            Text(
                modifier = Modifier
                .fillMaxWidth()
                .background(Color.White)
                .padding(vertical = 10. dp),
                text = item
            )
        }

    }
}
  

---

Conclusion

We’ve successfully implemented a swipe-to-delete feature using Jetpack Compose SwipeToDismissBox with Material 3.