Code
A CodeTextField component with COUI style.
A verification-code input that splits the code into cellCount cells, mirroring COUICodeInputView: 42x46dp card cells with an 8dp corner radius, a 1.6dp primary-colored stroke on the active cell, digits popping in with a 0.6->1.0 scale + fade (100ms, COUI move ease) and fading out with a 33ms delay. A transparent text field overlays the cells (like COUI's transparent EditText), so tapping anywhere focuses the component and typing fills the cells from left to right. A multi-character insertion (paste) replaces the whole code and is distributed into the cells. A blinking cursor is shown in the active empty cell while focused.
On narrow layouts the cells shrink proportionally below the 360dp reference width and the gap between cells adapts within COUI's min/max bounds.
Parameters
The code to be displayed in the cells. Characters beyond cellCount are ignored.
The callback to be called when the code changes. Whitespace is stripped and the code is truncated to cellCount before this is called.
The modifier to be applied to the CodeTextField.
The number of code cells.
Whether the CodeTextField is enabled.
Whether to show a dot instead of the digit in filled cells (COUI couiEnableSecurityInput).
The size of one cell before adaptive scaling.
The corner radius of one cell.
The CodeTextFieldColors applied to the CodeTextField. Use CodeTextFieldDefaults.codeTextFieldColors to customize.
The text style of the cell digits.
The keyboard options to be applied to the hidden input field.
The callback to be called with the full code once all cells are filled (COUI OnInputListener.onSuccess).
The interaction source to be applied to the hidden input field.