focusable

fun Modifier.focusable(
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
) =
    this.then(
        if (enabled) {
            FocusableElement(interactionSource)
        } else {
            Modifier
        }
    )

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.

Parameters

Code Examples

FocusableSample

@Composable
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 = text,
            modifier =
                Modifier
                    // add focusRequester modifier before the focusable (or even in the parent)
                    .focusRequester(focusRequester)
                    .focusable(interactionSource = interactionSource),
        )
        Button(onClick = { focusRequester.requestFocus() }) {
            Text("Bring focus to the text above")
        }
    }
}