Build apps faster with our new App builder! Check it out →

combinedClickable

Common

Modifier in Compose Foundation

Configure component to receive clicks, double clicks and long clicks via input or accessibility "click" event.

Add this modifier to the element to make it clickable within its bounds.

If you need only click handling, and no double or long clicks, consider using [clickable]

This version has no [MutableInteractionSource] or [Indication] parameters, the default indication from [LocalIndication] will be used. To specify [MutableInteractionSource] or [Indication], use the other overload.

If you are only creating this combinedClickable modifier inside composition, consider using the other overload and explicitly passing LocalIndication.current for improved performance. For more information see the documentation on the other overload.

Note, if the modifier instance gets re-used between a key down and key up events, the ongoing input will be aborted.

Note Any removal operations on Android Views from clickable should wrap onClick in a post { } block to guarantee the event dispatch completes before executing the removal. (You do not need to do this when removing a composable because Compose guarantees it completes via the snapshot state system.)

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.8.0-alpha04")
}

Overloads


fun Modifier.combinedClickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onLongClickLabel: String? = null,
    onLongClick: (() -> Unit)? = null,
    onDoubleClick: (() -> Unit)? = null,
    hapticFeedbackEnabled: Boolean = true,
    onClick: () -> Unit
)

Parameters

namedescription
enabledControls the enabled state. When false, [onClick], [onLongClick] or [onDoubleClick] won't be invoked
onClickLabelsemantic / accessibility label for the [onClick] action
rolethe type of user interface element. Accessibility services might use this to describe the element or do customizations
onLongClickLabelsemantic / accessibility label for the [onLongClick] action
onLongClickwill be called when user long presses on the element
onDoubleClickwill be called when user double clicks on the element
hapticFeedbackEnabledwhether to use the default [HapticFeedback] behavior
onClickwill be called when user clicks on the element
@Deprecated(message = "Maintained for binary compatibility", level = DeprecationLevel.HIDDEN)
fun Modifier.combinedClickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onLongClickLabel: String? = null,
    onLongClick: (() -> Unit)? = null,
    onDoubleClick: (() -> Unit)? = null,
    onClick: () -> Unit
)

fun Modifier.combinedClickable(
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onLongClickLabel: String? = null,
    onLongClick: (() -> Unit)? = null,
    onDoubleClick: (() -> Unit)? = null,
    hapticFeedbackEnabled: Boolean = true,
    onClick: () -> Unit
)

Parameters

namedescription
interactionSource[MutableInteractionSource] that will be used to emit [PressInteraction.Press] when this clickable is pressed. If null, an internal [MutableInteractionSource] will be created if needed.
indicationindication to be shown when modified element is pressed. By default, indication from [LocalIndication] will be used. Pass null to show no indication, or current value from [LocalIndication] to show theme default
enabledControls the enabled state. When false, [onClick], [onLongClick] or [onDoubleClick] won't be invoked
onClickLabelsemantic / accessibility label for the [onClick] action
rolethe type of user interface element. Accessibility services might use this to describe the element or do customizations
onLongClickLabelsemantic / accessibility label for the [onLongClick] action
onLongClickwill be called when user long presses on the element
onDoubleClickwill be called when user double clicks on the element
hapticFeedbackEnabledwhether to use the default [HapticFeedback] behavior
onClickwill be called when user clicks on the element
@Deprecated(message = "Maintained for binary compatibility", level = DeprecationLevel.HIDDEN)
fun Modifier.combinedClickable(
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onLongClickLabel: String? = null,
    onLongClick: (() -> Unit)? = null,
    onDoubleClick: (() -> Unit)? = null,
    onClick: () -> Unit
)

Code Example

ClickableSample

@Composable
fun ClickableSample() {
    val count = remember { mutableStateOf(0) }
    // content that you want to make clickable
    Text(text = count.value.toString(), modifier = Modifier.clickable { count.value += 1 })
}
by @alexstyl