New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Foundation

focusGroup

Common

Creates a focus group or marks this component as a focus group. This means that when we move focus using the keyboard or programmatically using [FocusManager.moveFocus()][androidx.compose.ui.focus.FocusManager.moveFocus], the items within the focus group will be given a higher priority before focus moves to items outside the focus group.

In the sample below, each column is a focus group, so pressing the tab key will move focus to all the buttons in column 1 before visiting column 2.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.7.0-beta04")
}

Overloads

@Stable
fun Modifier.focusGroup()

Code Examples

FocusGroupSample

@Composable
@Sampled
fun FocusGroupSample() {
    Row {
        Column(Modifier.focusGroup()) {
            Button({}) { Text("Row1 Col1") }
            Button({}) { Text("Row2 Col1") }
            Button({}) { Text("Row3 Col1") }
        }
        Column(Modifier.focusGroup()) {
            Button({}) { Text("Row1 Col2") }
            Button({}) { Text("Row2 Col2") }
            Button({}) { Text("Row3 Col2") }
        }
    }
}

FocusableFocusGroupSample

@Composable
@Sampled
fun FocusableFocusGroupSample() {
    val interactionSource = remember { MutableInteractionSource() }
    LazyRow(
        Modifier
            .focusable(interactionSource = interactionSource)
            .border(1.dp, if (interactionSource.collectIsFocusedAsState().value) Red else Black)
    ) {
        repeat(10) {
            item {
                Button({}) { Text("Button$it") }
            }
        }
    }
}