Skip to content
Gestures & Scroll

Swipe to Dismiss

Swipe list items away with SwipeToDismissBox

SwipeToDismissBox wraps each row with a swipe gesture and a background that shows behind it. Confirm the dismissal to remove the backing item from the list.

Swipe to Dismiss demos rendered in Compose Playground
Pixel-accurate preview · light theme

Examples

01

Dismiss to remove

Swipe a row in either direction to delete it.

Kotlin
val items = remember { mutableStateListOf("Email one", "Email two", "Email three") }
Column {
    items.forEach { item ->
        val state = rememberSwipeToDismissBoxState(
            confirmValueChange = { value ->
                if (value != SwipeToDismissBoxValue.Settled) {
                    items.remove(item)
                    true
                } else {
                    false
                }
            }
        )
        SwipeToDismissBox(
            state = state,
            backgroundContent = {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .background(MaterialTheme.colorScheme.errorContainer)
                )
            }
        ) {
            Text(item, Modifier.fillMaxWidth().padding(16.dp))
        }
    }
}