Available from v2.10.0
AddressPreview
AddressPreview is a UIKit component for displaying and setting addresses with tap-to-edit functionality.
Platform availability: iOS 17.0+
When to use:
- Use AddressPreview when you need to display a saved address with the ability to edit or add new addresses.
- Consider using AddressForm when you need to collect or edit full address details with validation.
It includes the following features:
- Unfilled, filled, error, and disabled states.
- Configurable title, hint, and address text.
- Customizable leading and trailing icons.
- Tap action handling.
Import
import BackbaseDesignSystem
Visual reference
Default |
Error |
Filled |
Disabled |
API reference
AddressPreview
A UIView component for displaying address information with interactive editing.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
title |
String? |
The title label text |
|
hint |
String? |
The hint label text (e.g., "(Optional)") |
|
address |
String? |
The address text to display |
|
errorMessage |
String? |
Error message to display below the component |
|
isEnabled |
Bool |
Whether user interaction is enabled |
|
leadingImage |
UIImage? |
The leading icon image |
|
trailingImage |
UIImage? |
The trailing icon image |
|
contentView |
UIView |
The container view for styling |
|
onPress |
(() -> Void)? |
Closure called when the component is tapped |
Initializers
- init(style:)
|
Parameter |
Type |
Description |
|---|---|---|
|
style |
Style<AddressPreview>? |
Custom style for the component |
Usage
Basic usage
let addressPreview = AddressPreview()
addressPreview.translatesAutoresizingMaskIntoConstraints = false
myAwesomeView.addSubview(addressPreview)
addressPreview.title = "Bank address"
addressPreview.hint = "(Optional)"
Handling tap actions
addressPreview.onPress = {
print("Address preview tapped!")
}
Displaying an error
addressPreview.errorMessage = "Bank address is required"
Setting an address
addressPreview.errorMessage = nil
let demoAddress = "10 10th St Ne, Atlanta, GA 30309, United States"
addressPreview.address = demoAddress
addressPreview.trailingImage = DesignSystem.Assets.icEdit
Disabling user interaction
addressPreview.isEnabled = false
Customization
Styling
|
Style |
Description |
|---|---|
|
Default style |
Applied automatically via the initializer |
Default style properties
|
Property |
Value |
Description |
|---|---|---|
|
contentView.layer.cornerRadius |
DesignSystem.shared.cornerRadius.large |
Corner radius for the content view |
|
leadingImage |
DesignSystem.Assets.icLocationCity |
Location icon |
|
trailingImage |
DesignSystem.Assets.icAdd |
Add icon (unfilled state) |
Custom styles
Provide your own Style<AddressPreview> to the initializer:
let customStyle: Style<AddressPreview> = { preview in
preview.contentView.layer.cornerRadius = DesignSystem.shared.cornerRadius.medium
preview.contentView.backgroundColor = Theme.colors.background.subtle
preview.leadingImage = DesignSystem.Assets.icHome
preview.trailingImage = DesignSystem.Assets.icChevronRight
}
let addressPreview = AddressPreview(style: customStyle)
Events
|
Event |
Type |
Description |
|---|---|---|
|
onPress |
(() -> Void)? |
Triggered when the component is tapped |
addressPreview.onPress = {
print("Address preview tapped!")
}
Accessibility
The AddressPreview component 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 |
Type |
Description |
|---|---|---|
|
isAccessibilityElement |
Bool |
Whether the component is an accessibility element |
|
accessibilityLabel |
String |
The combined label read by VoiceOver (title, hint, address) |
|
accessibilityTraits |
UIAccessibilityTraits |
The accessibility traits (typically .button) |
Best practices
- Set a descriptive accessibilityLabel that combines the title, hint, and address.
- Use .button trait to indicate the component is interactive.
- When in error state, include the error message in the accessibility announcement.
addressPreview.isAccessibilityElement = true
addressPreview.accessibilityLabel = "Bank address, Optional, 10 10th St Ne, Atlanta"
addressPreview.accessibilityTraits = .button
Dependencies
- External dependencies: None
- Internal dependencies: None
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses semantic tokens only. See Semantic tokens below.
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Colors |
Theme.colors.foreground.default |
Default text color |
|
Colors |
Theme.colors.foreground.danger |
Error text and border color |
|
Typography |
DesignSystem.shared.fonts.preferredFont(.body, .regular) |
Body text font |
|
Spacing |
DesignSystem.shared.spacer.sm |
Small spacing for layout |
|
Corner Radius |
DesignSystem.shared.cornerRadius.large |
Large corner radius for content view |
|
Icons |
DesignSystem.Assets.icLocationCity |
Location icon |
|
Icons |
DesignSystem.Assets.icAdd |
Add icon (unfilled state) |
|
Icons |
DesignSystem.Assets.icEdit |
Edit icon (filled state) |
See also
- AddressForm - Address form component for collecting address details