Jenga
A complete code-verification block: optional header, title, description, the code field, a "verifying" row, the resend row and actions, centered and spaced consistently.
It is plain content with no surface of its own, so the same block is used in a screen, a bottom sheet or a dialog.
Parameters
the heading, e.g. "Enter the code".
where the code was sent; style parts of it (such as the phone number) with an AnnotatedString.
the code input, normally a JengaOtpField.
the Modifier for the block.
whether the code is being checked; shows the verifying row.
the text next to the spinner while verifying, e.g. "Verifying…".
optional content above the title, such as an illustration.
optional resend row, normally a JengaOtpResend.
optional full-width actions at the bottom, such as a verify button.
padding around the block.
vertical space between sections.
the title text style.
the description text style.
Samples
var code by remember {
mutableStateOf(
value = "",
)
}
val countdown = rememberJengaCountdown(
duration = 5.minutes,
)
JengaOtpVerification(
title = "Enter the code",
description = AnnotatedString(
text = "We sent a 6-digit code to +254 712 345 678",
),
field = {
JengaOtpField(
value = code,
onValueChange = { code = it },
contentDescription = "Verification code",
)
},
resend = {
val remainingText = JengaOtpResendDefaults.formatRemaining(
remaining = countdown.remaining,
)
JengaOtpResend(
remaining = countdown.remaining,
onResend = { countdown.restart() },
countdownText = "Resend code in $remainingText",
resendText = "Resend code",
)
},
)