<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** SwipeableDeprecation


<h2 id="swipeable-state-anchors-orientation-enabled-reversedirection-interactionsource-thresholds-resistance-velocitythreshold">swipeable</h2>

```kotlin
@ExperimentalMaterialApi
fun <T> Modifier.swipeable(
    state: SwipeableState<T>,
    anchors: Map<Float, T>,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    interactionSource: MutableInteractionSource? = null,
    thresholds: (from: T, to: T) -> ThresholdConfig = { _, _ -> FixedThreshold(56.dp) },
    resistance: ResistanceConfig? = resistanceConfig(anchors.keys),
    velocityThreshold: Dp = VelocityThreshold,
) =
    composed(
        inspectorInfo =
            debugInspectorInfo {
                name = "swipeable"
                properties["state"] = state
                properties["anchors"] = anchors
                properties["orientation"] = orientation
                properties["enabled"] = enabled
                properties["reverseDirection"] = reverseDirection
                properties["interactionSource"] = interactionSource
                properties["thresholds"] = thresholds
                properties["resistance"] = resistance
                properties["velocityThreshold"] = velocityThreshold
            }
    ) {
        require(anchors.isNotEmpty()) { "You must have at least one anchor." }
        require(anchors.values.distinct().count() == anchors.size) {
            "You cannot have two anchors mapped to the same state."
        }
        val density = LocalDensity.current
        state.ensureInit(anchors)
        LaunchedEffect(anchors, state) {
            val oldAnchors = state.anchors
            state.anchors = anchors
            state.resistance = resistance
            state.thresholds = { a, b ->
                val from = anchors.getValue(a)
                val to = anchors.getValue(b)
                with(thresholds(from, to)) { density.computeThreshold(a, b) }
            }
            with(density) { state.velocityThreshold = velocityThreshold.toPx() }
            state.processNewAnchors(oldAnchors, anchors)
        }

        Modifier.draggable(
            orientation = orientation,
            enabled = enabled,
            reverseDirection = reverseDirection,
            interactionSource = interactionSource,
            startDragImmediately = state.isAnimationRunning,
            onDragStopped = { velocity -> launch { state.performFling(velocity) } },
            state = state.draggableState,
        )
    }
```


Enable swipe gestures between a set of predefined states.

To use this, you must provide a map of anchors (in pixels) to states (of type `T`). Note that
this map cannot be empty and cannot have two anchors mapped to the same state.

When a swipe is detected, the offset of the `SwipeableState` will be updated with the swipe
delta. You should use this offset to move your content accordingly (see `Modifier.offsetPx`).
When the swipe ends, the offset will be animated to one of the anchors and when that anchor is
reached, the value of the `SwipeableState` will also be updated to the state corresponding to the
new anchor. The target anchor is calculated based on the provided positional `thresholds`.

Swiping is constrained between the minimum and maximum anchors. If the user attempts to swipe
past these bounds, a resistance effect will be applied by default. The amount of resistance at
each edge is specified by the `resistance` config. To disable all resistance, set it to `null`.

For an example of a `swipeable` with three states, see:

#### Parameters

| | |
| --- | --- |
| T | The type of the state. |
| state | The state of the `swipeable`. |
| anchors | Pairs of anchors and states, used to map anchors to states and vice versa. |
| thresholds | Specifies where the thresholds between the states are. The thresholds will be used to determine which state to animate to when swiping stops. This is represented as a lambda that takes two states and returns the threshold between them in the form of a `ThresholdConfig`. Note that the order of the states corresponds to the swipe direction. |
| orientation | The orientation in which the `swipeable` can be swiped. |
| enabled | Whether this `swipeable` is enabled and should react to the user's input. |
| reverseDirection | Whether to reverse the direction of the swipe, so a top to bottom swipe will behave like bottom to top, and a left to right swipe will behave like right to left. |
| interactionSource | Optional `MutableInteractionSource` that will passed on to the internal `Modifier.draggable`. |
| resistance | Controls how much resistance will be applied when swiping past the bounds. |
| velocityThreshold | The threshold (in dp per second) that the end velocity has to exceed in order to animate to the next state, even if the positional `thresholds` have not been reached. |