Jenga
A one-time-code input drawn as a row of cells.
One text input sits under all the cells, so typing, backspace, paste, SMS code autofill (on platforms that support it) and screen readers treat the code as a single field. Input is filtered by inputType and capped at length before onValueChange is called, so a pasted "Your code is 123-456" becomes "123456".
The field never clears itself: after a failed check, set status to JengaTextFieldStatus.Error (the cells turn red and shake) and clear value if the code should be re-entered. The shake runs when status changes to Error, so set it back to JengaTextFieldStatus.Default when the user edits the code; a later failure then shakes again.
Parameters
the code entered so far.
called with the filtered, length-capped code.
what a screen reader announces for the field, e.g. "Verification code".
the Modifier for the whole field (cells + supporting text).
the number of cells.
called once each time the code reaches length characters.
which characters are accepted; also picks the keyboard.
validation status; drives cell borders and the supporting-text color.
optional helper or error text under the cells.
whether the field can be focused and edited.
whether the field is focusable but not editable, e.g. while the code is checked.
whether to show a dot instead of each character.
whether to focus the field and show the keyboard when it first appears.
how the default cells are drawn; ignored when cell is set.
the largest size of one cell.
the space between cells.
when above 0, adds a wider gap after every groupSize cells (3 gives 123 456).
the cell shape for JengaOtpCellStyle.Outlined and JengaOtpCellStyle.Filled.
the color set; defaults to JengaOtpFieldDefaults.colors.
the character text style.
optional custom cell; it is drawn inside a box of the cell's size.
Samples
var code by remember {
mutableStateOf(
value = "",
)
}
JengaOtpField(
value = code,
onValueChange = { code = it },
contentDescription = "Verification code",
onComplete = { },
autoFocus = true,
)