Underline OTP

Borderless OTP cells marked only by an underline that thickens when active.

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 code by remember { mutableStateOf("") }
Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
    repeat(5) { i ->
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .width(36.dp)
                .drawBehind {
                    val active = i == code.length
                    drawLine(
                        color = if (active) Color(0xFFF59E0B)
                        else Color.Gray,
                        start = Offset(0f, size.height),
                        end = Offset(size.width, size.height),
                        strokeWidth = if (active) 3f else 1.5f,
                    )
                },
        ) {
            Text(code.getOrNull(i)?.toString() ?: "")
        }
    }
}