Structure
OUDSPasswordInput
Password input is a UI element that allows to securely and confidentially capture a user’s password. As it is based on the OUDSTextInput, it offers same layout and the same elements of configuration.
- iOS 15.0+
- macOS 13.0+
- visionOS 1.0+
@MainActor struct OUDSPasswordInput
Mentioned In
Layout
Passwords input is based on several configurable UI elements:
label: It is used to describe the purpose of the input.
placeholder: 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)
lock icon: it helps to reinforce the security context.
Helper text: A supporting text conveys additional information about the password field.
Outlined style
By default, the input is with a subtle background fill and invisible bottom border, creating a softer and more contained look.
// An outlined text input
OUDSPasswordInput(label: "Your password", password: $password, isOutlined: true)
// With a localizable from a bundle
OUDSPasswordInput(LocalizedStringKey("password_label"), bundle: Bundle.module, password: $password)
Rounded layout
As the OUDSTextInput, rounded corners can be enabled or disabled using the hasRoundedTextInputs values of the Tuning object in your theme configuration.
Status
As OUDSPasswordInput is based on the OUDSTextInput, all the status are the same and have the same behavior available here OUDSTextInput.Status
Accessibility considerations
By default no haptics are done by the component for the trailing action. However you should think about cases wher you will have to make the devices vibrates. You can refer to the Human Interface Guidelines of Apple.
Rich text
Rich text can be used for error and helper texts.
Strong text can be used sparingly to highlight key information within the content. No other text styles should be used. Underlined text must not be applied manually (e.g. in error message), as it is commonly associated with hyperlinks and may mislead users.
Code samples
// The password to display and edit
@State var password: String = ""
// A basic password input with label
OUDSPasswordInput(label: "Password", password: $password)
// Add a leading icon and helper text to more context
OUDSPasswordInput(label: "Password", password: $password, lockIcon: true, helperText: "Your password must be between 8 and 20 characters long.")
// Password with prefix
OUDSPasswordInput(label: "Password", password: $password, prefix: "CORP-")
// Make password visible
OUDSPasswordInput(label: "Password", password: $password, isHiddenPassword: .constant(false))
Design documentation
unified-design-system.orange.com
Themes rendering
Orange
Orange Compact
Sosh
Wireframe
Version
1.2.0 (Figma component design version)
Since
1.2.0
Topics
Initializers
init(LocalizedStringKey, tableName: String?, bundle: Bundle, password: Binding<String>, isHiddenPassword: Binding<Bool>, placeholder: String?, prefix: String?, lockIcon: Bool, helperText: String?, isOutlined: Bool, constrainedMaxWidth: Bool, status: OUDSTextInput.Status)Creates a password input with a localized label, looking up the key in the given bundle.
init(LocalizedStringKey, tableName: String?, bundle: Bundle, password: Binding<String>, isHiddenPassword: Binding<Bool>, placeholder: String?, prefix: String?, lockIcon: Bool, helperText: AttributedString, isOutlined: Bool, constrainedMaxWidth: Bool, status: OUDSTextInput.Status)Creates a password input with a localized label, looking up the key in the given bundle.
init(label: String, password: Binding<String>, isHiddenPassword: Binding<Bool>, placeholder: String?, prefix: String?, lockIcon: Bool, helperText: AttributedString, isOutlined: Bool, constrainedMaxWidth: Bool, status: OUDSTextInput.Status)Creates a password input with a rich text as helper text
init(label: String, password: Binding<String>, isHiddenPassword: Binding<Bool>, placeholder: String?, prefix: String?, lockIcon: Bool, helperText: String?, isOutlined: Bool, constrainedMaxWidth: Bool, status: OUDSTextInput.Status)Creates a password input.
Instance Properties