Extra

SwipeToDismiss

A FormaUI swipe-to-dismiss row — lets the user swipe a row horizontally to dismiss it (e.g. delete or archive), delegating to Material 3's stable SwipeToDismissBox with hoisted state, a revealed background slot, and per-direction enable flags.

3 variantsThemed defaults

import dev.formaui.components.swipedismiss.FormaSwipeToDismiss

Both directionsSingle direction (enable flags)Gestures disabled

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

LIVE PREVIEW

Live preview — ~37 MB development build

Usage

KOTLIN

123456789101112131415val state = rememberSwipeToDismissBoxState()
FormaSwipeToDismiss(
    state = state,
    onDismiss = { direction -> onRemove(item) },
    backgroundContent = {
        Box(
            Modifier.fillMaxSize()
                .background(MaterialTheme.colorScheme.errorContainer)
                .padding(horizontal = FormaTheme.spacing.md),
            contentAlignment = Alignment.CenterEnd,
        ) { Text("Delete", color = MaterialTheme.colorScheme.onErrorContainer) }
    },
) {
    FormaListItem(headline = item.title, supporting = item.subtitle)
}

FormaSwipeToDismiss

Wraps RowScope content with a horizontal swipe-to-dismiss gesture; the caller creates the state via rememberSwipeToDismissBoxState and reacts to a completed swipe via onDismiss (or by reading state.dismissDirection). The backgroundContent slot is revealed behind the content while swiping — vary it per direction using state.

ParameterTypeDefaultDescription

staterequiredTypeSwipeToDismissBoxStateDefaultrequiredDescriptionthe Material 3 SwipeToDismissBoxState tracking the swipe; create it with rememberSwipeToDismissBoxState (initialValue, confirmValueChange, positionalThreshold).

backgroundContentrequiredType@Composable RowScope.() -> UnitDefaultrequiredDescriptionthe content stacked behind content and revealed while swiping, laid out in a RowScope; use state (e.g. state.dismissDirection) to vary it per swipe direction.

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the row.

enableDismissFromStartToEndTypeBooleanDefaulttrueDescriptionwhether the row can be dismissed by swiping start-to-end (defaults to true).

enableDismissFromEndToStartTypeBooleanDefaulttrueDescriptionwhether the row can be dismissed by swiping end-to-start (defaults to true).

gesturesEnabledTypeBooleanDefaulttrueDescriptionwhether the swipe gesture is interactive (defaults to true).

onDismissType(SwipeToDismissBoxValue) -> UnitDefault{}Descriptioncalled when content is dismissed, with the resulting SwipeToDismissBoxValue direction (defaults to a no-op).

contentrequiredType@Composable RowScope.() -> UnitDefaultrequiredDescriptionthe dismissable content, laid out in a RowScope (typically a FormaListItem or a Surface).

Supporting API

rememberSwipeToDismissBoxStatefunction (Material 3): The component defines no state type of its own — callers create and own the swipe state via Material 3's rememberSwipeToDismissBoxState and read dismissDirection / currentValue from it.
SwipeToDismissBoxValueenum (Material 3): The swipe direction reported to onDismiss and held by the state: StartToEnd, EndToStart, Settled.

Accessibility

Inherits Material 3's SwipeToDismissBox gesture handling; because a swipe gesture is not reachable by all users, pair the swipe action with an equivalent explicit control (e.g. a trailing overflow action) so the dismiss action stays operable without gestures.

PreviousSnackbar Next Switch