Available from v8.1.0
BB.InputPassword
BB.InputPassword is a SwiftUI secure text input component with built-in visibility toggle and form-state styling.
Platform availability: iOS 17.0+
- Supports secure and visible text toggle.
- Supports helper text and validation text.
- Supports read-only and disabled states.
When to use:
- Use BB.InputPassword for password and passcode-like fields in SwiftUI forms.
Import
import SwiftUI
import BackbaseDesignSystem
Visual reference
Default
|
Error |
Disabled |
Editing |
Characters visible |
|
API reference
BB.InputPassword
Initializers
init(text:placeholder:labelPrimaryText:labelSecondaryText:)
Creates a password input field.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
Binding<String> |
Binding to the input text |
|
placeholder |
String |
Placeholder text displayed when empty |
|
labelPrimaryText |
String? |
Optional primary label above the field |
|
labelSecondaryText |
String? |
Optional secondary label near the primary label |
Methods
errorText(_ text: Binding<String?>)
Displays an error message below the input field.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
Binding<String?> |
Binding to the error message text |
Returns: Self - Modified input password instance.
helperText(_ text: String?)
Displays helper text below the input field.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String? |
The helper text to display |
Returns: Self - Modified input password instance.
helperText(_ text: Binding<String?>)
Displays helper text below the input field using a binding.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
Binding<String?> |
Binding to the helper text |
Returns: Self - Modified input password instance.
readOnly(_ isReadOnly: Bool)
Sets whether the input field is read-only.
|
Parameter |
Type |
Description |
|---|---|---|
|
isReadOnly |
Bool |
Whether the field is read-only |
Returns: Self - Modified input password instance.
readOnly(_ isReadOnly: Binding<Bool>)
Sets whether the input field is read-only using a binding.
|
Parameter |
Type |
Description |
|---|---|---|
|
isReadOnly |
Binding<Bool> |
Binding to the read-only state |
Returns: Self - Modified input password instance.
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
labelPrimaryText |
String? |
nil |
|
labelSecondaryText |
String? |
nil |
|
placeholder |
String |
Required |
|
text |
Binding<String> |
Required |
labelPrimaryText
The labelPrimaryText property sets the primary label displayed above the field.
BB.InputPassword(
text: $password,
placeholder: "Enter password",
labelPrimaryText: "Password"
)
labelSecondaryText
The labelSecondaryText property sets the secondary label displayed near the primary label.
BB.InputPassword(
text: $password,
placeholder: "Enter password",
labelSecondaryText: "Required"
)
placeholder
The placeholder property sets the placeholder text displayed when the field is empty.
BB.InputPassword(text: $password, placeholder: "Enter password")
text
The text property binds the current input value.
@State private var password = ""
BB.InputPassword(text: $password, placeholder: "Enter password")
Usage
Basic usage
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
@State private var password = ""
var body: some View {
BB.InputPassword(text: $password, placeholder: "Enter password")
}
}
Common use cases
With labels, helper text, and error text
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
@State private var password = ""
@State private var errorText: String? = "Minimum 8 characters"
var body: some View {
BB.InputPassword(
text: $password,
placeholder: "Enter password",
labelPrimaryText: "Password",
labelSecondaryText: "Required"
)
.errorText($errorText)
.helperText("Use at least 8 characters and one number")
}
}
Read-only field
BB.InputPassword(text: $password, placeholder: "Password")
.readOnly(true)
Advanced usage
Use focus and disabled states with external form state.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
@State private var password = ""
@State private var isDisabled = false
@FocusState private var isPasswordFocused: Bool
var body: some View {
BB.InputPassword(
text: $password,
placeholder: "Enter password",
labelPrimaryText: "Password"
)
.focused($isPasswordFocused)
.disabled(isDisabled)
}
}
States and variants
Default
This is the initial state of the input field.
Visual characteristics:
- Secure text entry active
- Leading lock icon
- Trailing visibility toggle icon
BB.InputPassword(text: $password, placeholder: "Enter password")
Focused
This state occurs when the field has keyboard focus.
Visual characteristics:
- Focused field styling with brand border color
- Active input cursor
Error
This state occurs when errorText is set to a non-nil value.
Visual characteristics:
- Error text displayed below the field
- Error state colors applied to border
BB.InputPassword(text: $password, placeholder: "Password")
.errorText($errorText)
Read-only
This state occurs when readOnly(true) is applied.
Visual characteristics:
- Non-editable field content
- Read-only visual style
BB.InputPassword(text: $password, placeholder: "Password")
.readOnly(true)
Disabled
This state occurs when .disabled(true) is applied.
Visual characteristics:
- Disabled contrast styling
- No text editing interaction
BB.InputPassword(text: $password, placeholder: "Password")
.disabled(true)
Customization
Styling
|
API |
Description |
|---|---|
|
.readOnly(_:), .helperText(_:), .errorText(_:) |
Main form states and feedback |
Custom styles
Custom style changes are driven through theme tokens and design system configuration defined in defaultTokens.json.
Error handling
BB.InputPassword does not throw errors in its public API.
Events
This component does not expose callback closures in the public API. Field text changes are observed through the text binding.
Accessibility
This component can be configured with accessibility features at the integration level. Use standard SwiftUI accessibility modifiers.
Accessibility configuration
|
Modifier |
Description |
|---|---|
|
.accessibilityLabel(_:) |
Sets the field label for screen readers |
|
.accessibilityHint(_:) |
Sets the field hint |
|
.accessibilityValue(_:) |
Sets the current value description |
Best practices
- Provide meaningful accessibility labels that describe the field's purpose.
- Use accessibility hints to provide additional context when needed.
- Ensure all interactive elements are accessible.
BB.InputPassword(text: $password, placeholder: "Password")
.accessibilityLabel("Password")
.accessibilityHint("Secure text input")
Dependencies
- External dependencies:
- None: No third-party package dependency for the public API.
- Framework requirements: SwiftUI.
- Internal dependencies:
- BackbaseDesignSystem: Base input configuration, icons, and theming.
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 InputPassword:
- color/input: Background, border, value, placeholder, and icon colors per state
Input tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.input.default.background |
{theme.color.background.surface-1} |
|
Border (default) |
theme.color.input.default.border |
{theme.color.border.default} |
|
Border (focused) |
theme.color.input.focused.border |
{theme.color.border.brand} |
|
Border (error) |
theme.color.input.error.border |
{theme.color.border.danger} |
|
Placeholder |
theme.color.input.default.placeholder |
{theme.color.foreground.support} |
|
Value |
theme.color.input.default.value |
{theme.color.foreground.default} |
Localization
The following strings are available for localization:
|
Key |
Default Value |
Description |
|---|---|---|
|
DesignSystem.inputPassword.accessibility.leadingIcon |
Lock icon |
Leading icon accessibility label |
|
DesignSystem.inputPassword.accessibility.trailingIcon |
Password security |
Trailing icon accessibility label |
To customize these strings, add the keys to your app's Localizable.strings file.
Known limitations
- The public API does not expose direct control for the secure-toggle state.
- Read-only behavior is visual and interaction-focused, not a replacement for field-level security logic.
See also
- BB.InputText - Standard text input component
- BB.Switch - Binary input component