Indicate focus state

A focused state provides a clear visual cue to help users understand which UI element currently holds input focus. All interactive Material 3 components provide built-in focus indications by default.

Material theme focus indication

Material components use the ripple function and LocalIndication to draw visual state changes. To attach standard Material focus feedback to a custom component:

1. Create a MutableInteractionSource using remember { MutableInteractionSource() }.
2. Pass the interaction source to the indication modifier, alongside ripple().

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}
FocusedState.kt

Implement custom focus indications

For custom visual cues (such as scaling, borders, or glowing effects):

1. Create an IndicationNodeFactory.
2. Observe focus interactions emitted by the element's InteractionSource.
3. Apply the custom indication using the indication modifier.

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}
FocusSnippets.kt