SearchBar

SearchBar is a themed UISearchBar subclass with custom placeholder/text fonts, colors, and clear button customization.

Platform availability: iOS 17.0+

It includes the following features:

• Custom placeholder font and color configuration.
• Custom text font configuration.
• Clear button color customization.
• Integration with SearchController for search functionality.

When to use:

• Use SearchBar when you need a search input field that integrates with your design system's theming.
• Consider using SearchController with NavigationController for search functionality within navigation-based interfaces.
• Consider using TextInput for general text entry that does not require search-specific features.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

Visual reference

Default

Primary

API reference

SearchBar

Properties

Initializers

• init(frame:)
• Initializes and returns a newly allocated search bar object with the specified frame rectangle.

Configuration

clearButtonColor

The clearButtonColor specifies the color of the clear button that appears when text is entered.

                                                        
                                                        
                                                            let searchBar = SearchBar()
                                                        searchBar.clearButtonColor = Theme.colors.foreground.support
                                                        
                                                            

textFont

The textFont specifies the font used for the search text input.

                                                        
                                                        
                                                            let searchBar = SearchBar()
                                                        searchBar.textFont = DesignSystem.shared.fonts.preferredFont(.body, .regular)
                                                        
                                                            

placeholderColour

The placeholderColour specifies the color of the placeholder text.

                                                        
                                                        
                                                            let searchBar = SearchBar()
                                                        searchBar.placeholderColour = Theme.colors.foreground.support
                                                        
                                                            

Note: Changing the placeholder color and font properties after the placeholder text has been set will have no effect.

placeholderFont

The placeholderFont specifies the font used for the placeholder text.

                                                        
                                                        
                                                            let searchBar = SearchBar()
                                                        searchBar.placeholderFont = DesignSystem.shared.fonts.preferredFont(.body, .regular)
                                                        
                                                            

Usage

Basic usage with SearchController

Use a SearchController to get a search bar with appropriate styling applied:

                                                        
                                                        
                                                            class SearchBarViewController: UIViewController, UISearchBarDelegate {
                                                        
                                                            override func viewDidLoad() {
                                                                super.viewDidLoad()
                                                                
                                                                guard let navigationController = navigationController as? NavigationController else { return }
                                                        
                                                                let resultsController = SearchableTableViewController()
                                                                let searchController = navigationController.createSearchController(searchResultsController: resultsController)
                                                                searchController.searchBar.delegate = self
                                                                navigationItem.searchController = searchController
                                                                navigationItem.hidesSearchBarWhenScrolling = false
                                                            }
                                                        }
                                                        
                                                            

Standalone SearchBar

To use a search bar directly without a SearchController:

                                                        
                                                        
                                                            let searchBar = SearchBar()
                                                        DesignSystem.shared.styles.searchBar(searchBar)
                                                        searchBar.delegate = self
                                                        
                                                            

Customizing text appearance

Customize the text and placeholder appearance:

                                                        
                                                        
                                                            let searchBar = SearchBar()
                                                        let textField = searchBar.searchTextField
                                                        textField.backgroundColor = Theme.colors.background.overlay
                                                        textField.textColor = Theme.colors.foreground.default
                                                        
                                                        searchBar.clearButtonColor = Theme.colors.foreground.support
                                                        searchBar.textFont = DesignSystem.shared.fonts.preferredFont(.body, .regular)
                                                        searchBar.placeholderColour = Theme.colors.foreground.support
                                                        searchBar.placeholderFont = DesignSystem.shared.fonts.preferredFont(.body, .regular)
                                                        
                                                            

States and variants

Default state

The default appearance with placeholder text visible.

                                                        
                                                        
                                                            let searchBar = SearchBar()
                                                        DesignSystem.shared.styles.searchBar(searchBar)
                                                        searchBar.placeholder = "Search"
                                                        
                                                            

Active/editing state

The appearance when the search bar is focused and the user is typing. The text field becomes the first responder and the cancel button may appear.

With text state

The appearance when the user has entered search text. The clear button appears to the right of the text.

Customization

Styling

Accessibility

The SearchBar 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

Best practices

• The component inherits accessibility features from UISearchBar.
• Screen readers announce the search field and its contents appropriately.
• Ensure the placeholder text is descriptive for VoiceOver users.

Dependencies

• External dependencies: None
• Internal dependencies:
• NavigationController: Used for creating styled search controllers

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

Localization

Override the following strings to customize the text for the SearchBar on the app level:

                                                        
                                                        
                                                            "DesignSystem.searchBar.placeholder" = "Search";
                                                        
                                                            

See also

• NavigationController - Navigation controller with search integration