New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Foundation



Configure component to be focusable via focus system or accessibility "focus" event.

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

Last updated:


dependencies {


fun Modifier.focusable(
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,


enabledControls the enabled state. When false, element won't participate in the focus
interactionSource[MutableInteractionSource] that will be used to emit [FocusInteraction.Focus] when this element is being focused.

Code Example


fun FocusableSample() {
    // initialize focus reference to be able to request focus programmatically
    val focusRequester = remember { FocusRequester() }
    // MutableInteractionSource to track changes of the component's interactions (like "focused")
    val interactionSource = remember { MutableInteractionSource() }

    // text below will change when we focus it via button click
    val isFocused = interactionSource.collectIsFocusedAsState().value
    val text = if (isFocused) {
        "Focused! tap anywhere to free the focus"
    } else {
        "Bring focus to me by tapping the button below!"
    Column {
        // this Text will change it's text parameter depending on the presence of a focus
            text = text,
            modifier = Modifier
                // add focusRequester modifier before the focusable (or even in the parent)
                .focusable(interactionSource = interactionSource)
        Button(onClick = { focusRequester.requestFocus() }) {
            Text("Bring focus to the text above")