Import
Kotlin
If you need to reference the AddressForm component in your Kotlin code, make sure to properly import it on top of your file using the path below.
import com.backbase.android.design.address.AddressForm
XML
As long as you've properly installed and set up Backbase Design System in your project, you don't need to import components from those packages in your XML files anymore—they'll work automatically if the component path matches the installed package.
<fragment
android:name="com.backbase.android.design.address.AddressForm"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Usage
Basic usage
Create an AddressForm instance with default configuration.
// Basic address form without autocomplete
val configuration = AddressFormConfiguration {
setAddress1InputTitle(DeferredText.Constant("Street address"))
setAddress2InputTitle(DeferredText.Constant("Apartment or suite"))
setCityInputTitle(DeferredText.Constant("City"))
setSubdivisionInputTitle(DeferredText.Constant("State"))
setSubdivisionDropdownHint(DeferredText.Constant("Select state"))
setZipInputTitle(DeferredText.Constant("ZIP code"))
setAvailableSubdivisions(arrayOf("CA", "NY", "TX"))
}
val addressForm = AddressForm(configuration)
Advanced usage
Create an AddressForm with address autocomplete functionality.
// Address form with autocomplete
val configuration = AddressFormConfiguration {
setAddress1InputTitle(DeferredText.Constant("Street address"))
setAddress2InputTitle(DeferredText.Constant("Apartment or suite"))
setCityInputTitle(DeferredText.Constant("City"))
setSubdivisionInputTitle(DeferredText.Constant("State"))
setSubdivisionDropdownHint(DeferredText.Constant("Select state"))
setZipInputTitle(DeferredText.Constant("ZIP code"))
setAvailableSubdivisions(arrayOf("CA", "NY", "TX"))
setSearchResultsProvider(customSearchProvider)
setSearchBoxButtonConfiguration(searchBoxConfig)
}
val addressForm = AddressForm(configuration, initialAddress)
Configuration
Properties
|
Property |
Type |
Default |
|---|---|---|
|
address |
AddressFormValues? |
null |
|
addressErrors |
AddressFormValues? |
null |
|
onFormChange |
((AddressFormValues?) -> Unit)? |
null |
address
The address that's currently visible on the address form. If this value is null, the address form would be empty.
// Set address values
val addressValues = AddressFormValuesObject(
addressLine1 = "123 Main St",
addressLine2 = "Apt 4B",
city = "San Francisco",
subdivision = "CA",
zip = "94105"
)
addressForm.address = addressValues
addressErrors
Inline errors to be displayed on the address form. This can be used by a journey to display data validation errors on the address form if the business logic finds that the user has provided incorrect data. For example, showing an error if the user does not enter data in a required field.
// Set validation errors
val errorValues = AddressFormValuesObject(
addressLine1 = "Street address is required",
addressLine2 = "",
city = "City is required",
subdivision = "",
zip = "ZIP code is required"
)
addressForm.addressErrors = errorValues
onFormChange
An optional callback triggered when the form content is changed. The implementor might typically use this in order to perform real-time validation of the address being entered by the customer.
// Handle form changes
addressForm.onFormChange = { addressValues ->
println("Form changed: $addressValues")
// Perform validation or other actions
}
Styling
Predefined styles
The AddressForm component uses predefined styles for its input fields through the design system.
<!-- Input fields are automatically styled using TextInputView components -->
<com.backbase.android.design.input.TextInputView
android:id="@+id/address1_inputView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
States
Empty state
Display the form without any pre-filled address data.
// Empty form
addressForm.address = null
Filled state
Display the form with pre-filled address data.
// Pre-filled form
val addressValues = AddressFormValuesObject(
addressLine1 = "123 Main St",
addressLine2 = "Apt 4B",
city = "San Francisco",
subdivision = "CA",
zip = "94105"
)
addressForm.address = addressValues
Error state
Display validation errors on specific form fields.
// Show validation errors
val errorValues = AddressFormValuesObject(
addressLine1 = "Street address is required",
city = "City is required",
zip = "ZIP code is required"
)
addressForm.addressErrors = errorValues
Events
|
Event |
Type |
Description |
|---|---|---|
|
onFormChange |
((AddressFormValues?) -> Unit)? |
Callback triggered when form content changes |
|
Method |
Description |
|---|---|
|
getFirstViewIdWithError() |
Returns the ID of the first view with an error, or null if no errors exist |
|
setSearchBoxConfiguration(configuration) |
Sets the search box button configuration |
Form change events
The onFormChange callback is triggered whenever the user modifies any form field.
// Handle form changes
addressForm.onFormChange = { addressValues ->
addressValues?.let { values ->
// Validate required fields
if (values.addressLine1.isBlank()) {
// Handle validation error
}
// Update UI or perform other actions
updateSubmitButtonState()
}
}
getFirstViewIdWithError
The getFirstViewIdWithError() method returns the ID of the first view with an error, or null if no errors exist.
// Get first view with error
val errorViewId = addressForm.getFirstViewIdWithError()
if (errorViewId != null) {
// Scroll to or focus on the view with error
scrollToView(errorViewId)
}
setSearchBoxConfiguration
The setSearchBoxConfiguration(configuration) method sets the search box button configuration.
// Configure search box
val searchBoxConfig = SearchBoxButtonConfiguration {
setButtonText(DeferredText.Constant("Search"))
setButtonStyle(R.style.ButtonPrimary)
}
addressForm.setSearchBoxConfiguration(searchBoxConfig)
Search box events
The search box triggers address search functionality when tapped. The search box is automatically configured with click listener when AddressFormConfiguration includes search functionality.
Accessibility
Accessibility configuration
|
Property |
Description |
Type |
|---|---|---|
|
contentDescription |
Accessible description for screen readers |
String |
Best practices
- AddressForm automatically provides accessibility behavior through its input fields
- The component includes proper accessibility identifiers for all form fields
- Error states are communicated to screen readers via error messages
- Each input field has appropriate content descriptions for better accessibility
// Configure accessibility
addressForm.view?.contentDescription = "Address entry form"
Design tokens
Component tokens used by this component for theming:
Token group icons:
- closeIcon: R.attr.iconClose
Token Group textResources:
- editingContentDescription: R.string.bds_editing_content_description
Token group layoutResources:
- addressFormLayout: R.layout.address_form_layout
Token group inputStyling:
- textInputView: Integrated through TextInputView components
Token Group spacing:
- fieldSpacing: Integrated through layout resources and styling constants