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 androidx.compose.ui.text.input.TextFieldValue to be shown in the password input.
Called when the input service updates the values in TextFieldValue.
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.
Software-keyboard options that can be customized for this password input. This parameter is of type OudsPasswordInputKeyboardOptions, which is a specific class for password fields. It ensures that the keyboard type is always KeyboardType.Password, while allowing for the customization of other common options.
When the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in OudsPasswordInputKeyboardOptions.imeAction.
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
var value by remember { mutableStateOf("") }
OudsPasswordInput(
value = value,
onValueChange = { value = it },
lockIcon = true,
label = "Password",
helperText = "Your password must be between 8 and 20 characters long.",
)var value by remember { mutableStateOf("abc123") }
OudsPasswordInput(
value = value,
onValueChange = { value = it },
label = "Password",
error = OudsError("Password must be at least 8 characters.")
)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 password text to be shown in the text field.
The callback that is triggered when the user enters text. The updated password text is passed as a parameter.
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.
Software-keyboard options that can be customized for this password input. This parameter is of type OudsPasswordInputKeyboardOptions, which is a specific class for password fields. It ensures that the keyboard type is always KeyboardType.Password, while allowing for the customization of other common options.
When the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in OudsPasswordInputKeyboardOptions.imeAction.
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
var value by remember { mutableStateOf("") }
OudsPasswordInput(
value = value,
onValueChange = { value = it },
lockIcon = true,
label = "Password",
helperText = "Your password must be between 8 and 20 characters long.",
)var value by remember { mutableStateOf("abc123") }
OudsPasswordInput(
value = value,
onValueChange = { value = it },
label = "Password",
error = OudsError("Password must be at least 8 characters.")
)