Available from v1.0.0
TextInput (Password)
PasswordInput is a styled TextInput component configured for secure password entry with visibility toggle support.
Platform availability: iOS 17.0+
It includes the following features:
- Password visibility toggle accessory button.
- Multiple state styles (normal, focus, editing, error, disabled).
- Title label, helper text, and error message support.
- Configurable corner radius and border options.
- Secure text entry by default.
When to use:
- Use PasswordInput when you need a secure text field with password visibility toggle for authentication or account creation flows.
- Consider TextInput when the field is for non-sensitive text entry that doesn't require secure input masking.
Import
import BackbaseDesignSystem
Visual reference
|
|
|
|
|
|
|
|
API reference
TextInput (password configuration)
Properties
|
Property |
Type |
Description |
|---|---|---|
|
cornerRadius |
DesignSystem.CornerRadiusTypes |
The corner radius of the text input. Defaults to .none |
|
disableStyle |
Style<TextInput>? |
The style for the disabled state |
|
editingStyle |
Style<TextInput>? |
The style for the editing state |
|
errorLabel |
UILabel |
The label for displaying error messages |
|
errorStyle |
Style<TextInput>? |
The style for the error state |
|
focusStyle |
Style<TextInput>? |
The style for the focused state |
|
helperLabel |
UILabel |
The label appearing below the text field for helper text |
|
normalStyle |
Style<TextInput>? |
The style for the normal state |
|
showPasswordVisibilityAccessory |
Bool |
Whether to show the password hide/show accessory. Defaults to true for password style |
|
textField |
UITextField |
The underlying text field responsible for editing |
|
textFieldPaddings |
UIEdgeInsets |
The edge insets (padding) of the text input. Defaults to .zero |
|
titleLabel |
UILabel |
The label appearing above the text field |
Initializers
init(accessibilityLabel:)
|
Parameter |
Type |
Description |
|---|---|---|
|
accessibilityLabel |
String |
The accessibility label for the text input |
Methods
setError(errorMessage:)
Sets and displays an error message.
|
Parameter |
Type |
Description |
|---|---|---|
|
errorMessage |
String |
The error message to display |
- clearError()
- Clears the error message and restores normal styling.
- setPasswordVisibilityButtonAccessibilityLabel(_:)
- Sets the accessibility label for the visibility toggle button.
|
Parameter |
Type |
Description |
|---|---|---|
|
label |
String |
The accessibility label for the toggle button |
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
cornerRadius |
DesignSystem.CornerRadiusTypes |
.none |
|
textFieldPaddings |
UIEdgeInsets |
.zero |
|
showPasswordVisibilityAccessory |
Bool |
true |
cornerRadius
The cornerRadius specifies the corner radius style applied to the input field.
let passwordInput = TextInput(accessibilityLabel: "Password")
DesignSystem.shared.styles.passwordTextInput(passwordInput)
passwordInput.cornerRadius = .medium()
textFieldPaddings
The textFieldPaddings defines the internal padding of the text field.
let passwordInput = TextInput(accessibilityLabel: "Password")
DesignSystem.shared.styles.passwordTextInput(passwordInput)
passwordInput.textFieldPaddings = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
Usage
Basic password input
let passwordInput = TextInput(accessibilityLabel: "Password")
DesignSystem.shared.styles.passwordTextInput(passwordInput)
passwordInput.textField.placeholder = "Enter password"
passwordInput.titleLabel.text = "Password"
view.addSubview(passwordInput)
With validation
let passwordInput = TextInput(accessibilityLabel: "Password")
DesignSystem.shared.styles.passwordTextInput(passwordInput)
passwordInput.textField.placeholder = "Enter password"
passwordInput.titleLabel.text = "Password"
passwordInput.helperLabel.text = "Minimum 8 characters"
func validatePassword() {
guard let password = passwordInput.textField.text else { return }
if password.count < 8 {
passwordInput.setError(errorMessage: "Password must be at least 8 characters")
} else {
passwordInput.clearError()
}
}
view.addSubview(passwordInput)
Customizing visibility button accessibility
let passwordInput = TextInput(accessibilityLabel: "Password")
DesignSystem.shared.styles.passwordTextInput(passwordInput)
passwordInput.setPasswordVisibilityButtonAccessibilityLabel("Toggle password visibility")
view.addSubview(passwordInput)
Disabling the input
let passwordInput = TextInput(accessibilityLabel: "Password")
DesignSystem.shared.styles.passwordTextInput(passwordInput)
passwordInput.isUserInteractionEnabled = false
view.addSubview(passwordInput)
States and variants
Normal state
The default appearance when the input is not focused and has no errors.
let passwordInput = TextInput(accessibilityLabel: "Password")
DesignSystem.shared.styles.passwordTextInput(passwordInput)
Focused state
The appearance when the input field is actively focused for editing.
Error state
The appearance when validation fails or an error message is set.
passwordInput.setError(errorMessage: "Invalid password")
Disabled state
The appearance when the input is disabled and not interactive.
passwordInput.isUserInteractionEnabled = false
Customization
Styling
|
Style |
Description |
|---|---|
|
DesignSystem.shared.styles.passwordTextInput |
Default password input style with visibility toggle |
|
DesignSystem.shared.styles.textInput |
Base text input style |
Global properties
These design tokens from defaultTokens.json affect the final look of the password input:
|
Token Path |
Description |
|---|---|
|
theme.color.input.default.background |
Background color for default state |
|
theme.color.input.default.value |
Text color for default state |
|
theme.color.input.default.border |
Border color for default state |
|
theme.color.input.focused.border |
Border color for focused state |
|
theme.color.input.error.border |
Border color for error state |
|
theme.color.input.error.value |
Text color for error state |
|
theme.color.input.disabled.background |
Background color for disabled state |
|
theme.color.input.disabled.value |
Text color for disabled state |
Custom styling
let customPasswordStyle: Style<TextInput> = { input in
DesignSystem.shared.styles.passwordTextInput(input)
input.cornerRadius = .medium()
input.textFieldPaddings = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
input.normalStyle = input.normalStyle.map { normalStyle in
normalStyle <> { input in
input.textField.backgroundColor = .systemBackground
}
}
}
Error handling
Set and clear errors manually:
let passwordInput = TextInput(accessibilityLabel: "Password")
DesignSystem.shared.styles.passwordTextInput(passwordInput)
// Show error
passwordInput.setError(errorMessage: "Password must be at least 8 characters")
// Clear error
passwordInput.clearError()
Accessibility
The password input is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
Accessibility configuration
|
Property |
Description |
Type |
|---|---|---|
|
accessibilityLabel |
The accessible label for the text field, set during initialization |
String |
|
setPasswordVisibilityButtonAccessibilityLabel(_:) |
Sets the accessibility label for the visibility toggle button |
String |
Best practices
- Set a descriptive accessibilityLabel during initialization.
- Configure the visibility toggle button accessibility label for clear VoiceOver announcements.
- Error states are communicated through the error label which is accessible to VoiceOver.
- All interactive elements support VoiceOver interaction.
let passwordInput = TextInput(accessibilityLabel: "Password")
DesignSystem.shared.styles.passwordTextInput(passwordInput)
passwordInput.setPasswordVisibilityButtonAccessibilityLabel("Show or hide password")
Dependencies
- External dependencies: None
- Internal dependencies:
- TextInput: Base text input component
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
Tokens are defined in defaultTokens.json, which is integrated in the bundle of the framework, and can be customized by providing your own theme JSON file.
Token groups used by PasswordInput:
- color/input: Input field color states for normal, focused, error, and disabled states
Focused state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Border |
theme.color.input.focused.border |
{theme.color.border.brand} |
|
Background |
theme.color.input.focused.background |
{theme.color.background.surface-primary} |
Error state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Border |
theme.color.input.error.border |
{theme.color.border.danger} |
|
Background |
theme.color.input.error.background |
{theme.color.background.surface-primary} |
Disabled state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.input.disabled.background |
{theme.color.background.disabled} |
|
Border |
theme.color.input.disabled.border |
{theme.color.border.disabled} |
Dimension tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Corner Radius |
theme.radius.input.default |
8 |
|
Height |
Component default |
44 |
|
Horizontal Padding |
Component default |
16 |
|
Vertical Padding |
Component default |
8 |
|
Border Width |
Component default |
1 |
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Default Colors |
theme.color.input.default.* |
Default state colors (from JSON) |
|
Focused Colors |
theme.color.input.focused.* |
Focused state colors (from JSON) |
|
Error Colors |
theme.color.input.error.* |
Error state colors (from JSON) |
|
Typography |
DesignSystem.shared.fonts.preferredFont(.body, .regular) |
Input text font |
|
Corner Radius |
DesignSystem.CornerRadiusTypes |
Configurable corner radius |
|
Styles |
DesignSystem.shared.styles.passwordTextInput |
Predefined password input style |
See also
- TextInput - Base text input component
- InputAmount - Amount input component