Inputsicon

Mention field

Composer that surfaces a people picker when the user types an @ mention.

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

var text by remember { mutableStateOf("") }
val showPeople = text.endsWith("@")
Column {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        leadingIcon = { Icon(Icons.Filled.AlternateEmail, null) },
        placeholder = { Text("Mention a teammate…") },
        singleLine = true,
    )
    AnimatedVisibility(showPeople) {
        Surface(tonalElevation = 2.dp) {
            Column {
                listOf("@ada", "@linus", "@grace").forEach {
                    ListItem(headlineContent = { Text(it) })
                }
            }
        }
    }
}