clickable

Modifier in Compose Foundation

Configure component to receive clicks via input or accessibility "click" event.

Add this modifier to the element to make it clickable within its bounds and show a default indication when it's pressed.

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 clickable 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.

If you need to support double click or long click alongside the single click, consider using [combinedClickable].

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: 2024-09-07 14:23

Installation

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

Overloads

fun Modifier.clickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onClick: () -> Unit
)

Parameters

name	description
enabled	Controls the enabled state. When false, [onClick], and this modifier will appear disabled for accessibility services
onClickLabel	semantic / accessibility label for the [onClick] action
role	the type of user interface element. Accessibility services might use this to describe the element or do customizations
onClick	will be called when user clicks on the element

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

Parameters

name	description
interactionSource	[MutableInteractionSource] that will be used to dispatch [PressInteraction.Press] when this clickable is pressed. If null, an internal [MutableInteractionSource] will be created if needed.
indication	indication 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
enabled	Controls the enabled state. When false, [onClick], and this modifier will appear disabled for accessibility services
onClickLabel	semantic / accessibility label for the [onClick] action
role	the type of user interface element. Accessibility services might use this to describe the element or do customizations
onClick	will be called when user clicks on the element

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 })
}