OudsPinCodeInput
PIN code input is a UI element that allows to capture short, fixed-length numeric codes, typically for authentication or confirmation purposes, such as a four, six or eight-digit personal identification number (PIN). PIN code input is presented as a series of individual input fields or boxes, each representing a single digit, to enhance readability and encourage accurate input, while supporting smooth keyboard navigation and secured input masking if needed.
Rounded corners can be enabled or disabled using OudsThemeSettings.roundedCornerTextInputs property in the settings of the theme provided when calling the com.orange.ouds.core.theme.OudsTheme method.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.2.0 |
Parameters
The current PIN code value as a string of digits. The value is automatically truncated to the specified length.
Callback invoked when the PIN code value changes. The updated PIN code value comes as a parameter of the callback.
Modifier applied to the PIN code input.
The number of digits in the PIN code. Defaults to OudsPinCodeInputDefaults.Length.
Controls the style of the PIN code input. When true, it displays a minimalist PIN code input with a transparent background and a visible stroke outlining each digit box.
Optional OudsError to indicate that the user input does not meet validation rules or expected formatting. Pass null if there is no error.
An optional helper text displayed below the PIN code input. It conveys additional information about the input field, such as how it will be used. It should ideally only take up a single line, though it may wrap to multiple lines if required.
Called when the user presses the action button in the input method editor (IME), or by pressing the enter key on a hardware keyboard. By default, this parameter is null, and would execute the default behavior for a received IME Action e.g., androidx.compose.ui.text.input.ImeAction.Done would close the keyboard, androidx.compose.ui.text.input.ImeAction.Next would switch the focus to the next focusable item on the screen.
An optional hoisted MutableInteractionSource for observing and emitting Interactions for this PIN code input. Note that if null is provided, interactions will still happen internally.
Samples
var value by remember { mutableStateOf("") }
OudsPinCodeInput(
value = value,
onValueChange = { value = it },
length = OudsPinCodeInputLength.Four,
helperText = "Enter the 4-digit code sent to your phone."
)var value by remember { mutableStateOf("1234") }
OudsPinCodeInput(
value = value,
onValueChange = { value = it },
length = OudsPinCodeInputLength.Four,
error = OudsError("Verification failed. Check and enter the correct code."),
helperText = "Enter the 4-digit code sent to your phone."
)