OudsPasswordInput
Password input is a UI element that allows to securely and confidentially capture a user's password. Password Input enhances privacy by replacing characters with dots, while they are being typed; and also embeds usability features such as the ability to show and hide password, and helper text to guide password creation.
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 editable text state of the password input, including the text itself, position of the cursor or selection and the text obfuscation mode.
Modifier applied to the password input.
Label displayed above the password input. It describes the purpose of the input.
Text displayed when the password input is empty. It provides a hint or guidance inside the field to suggest expected input.
When true, a lock icon is displayed at the start of the password input to visually reinforce the security context. Defaults to false.
Text placed before the user's input. A prefix is not common and is discouraged in a Password Input component. In very specific cases, it can provide context or format requirements (e.g., “DEV-” for test accounts, "admin-" as a pattern to define an admin password)
Controls the enabled state of the password input. When false, this password input will not be focusable and will not react to input events. True by default.
Controls the read-only state of the password input. When true, the text is visible but not editable. False by default.
An optional loading progress indicator displayed in the password input to indicate an ongoing operation.
Controls the style of the password input. When true, it displays a minimalist password input with a transparent background and a visible stroke outlining the field.
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 password 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.
When true, the password input width is constrained to a maximum value defined by the design system. When false, no specific width constraint is applied, allowing the component to size itself or follow external modifiers. Defaults to false.
An optional InputTransformation that will be used to transform changes to the OudsPasswordInputState made by the user. The transformation will be applied to changes made by hardware and software keyboard events, pasting or dropping text, accessibility services, and tests. The transformation will not be applied when changing the state programmatically, or when the transformation is changed. If the transformation is changed on an existing text field, it will be applied to the next user edit. The transformation will not immediately affect the current state.
Software keyboard options that contain configurations such as KeyboardType and ImeAction.
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., ImeAction.Done would close the keyboard, ImeAction.Next would switch the focus to the next focusable item on the screen.
Callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw a cursor or selection around the text.
An optional hoisted MutableInteractionSource for observing and emitting Interactions for this password input. Note that if null is provided, interactions will still happen internally.
Samples
OudsPasswordInput(
state = rememberOudsPasswordInputState(),
lockIcon = true,
label = "Password",
helperText = "Your password must be between 8 and 20 characters long.",
)OudsPasswordInput(
state = rememberOudsPasswordInputState(),
label = "Password",
error = OudsError("Password must be at least 8 characters.")
)