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.
It is recommended to use state-based password inputs rather than value-based ones, as they provide a more complete and reliable approach to managing the state of a password input.
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 password visibility.
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.
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.
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 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.
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.")
)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.
It is recommended to use state-based password inputs rather than value-based ones, as they provide a more complete and reliable approach to managing the state of a password input.
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.
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.
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.
It is recommended to use state-based password inputs rather than value-based ones, as they provide a more complete and reliable approach to managing the state of a password input.
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.
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.
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.")
)