Secure PIN

Four masked cells for a numeric PIN, the active cell highlighted with a ring.

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 pin by remember { mutableStateOf("") }
Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
    repeat(4) { i ->
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .size(48.dp)
                .border(
                    width = if (i == pin.length) 2.dp else 1.dp,
                    color = if (i == pin.length)
                        MaterialTheme.colorScheme.primary
                    else MaterialTheme.colorScheme.outline,
                    shape = MaterialTheme.shapes.medium,
                ),
        ) {
            if (i < pin.length) {
                Box(
                    Modifier
                        .size(10.dp)
                        .background(LocalContentColor.current, CircleShape),
                )
            }
        }
    }
}