While working with Power Apps forms, we might have some fields where we can select an option from multiple. For those fields, we can use the Power Apps combo box control, which also allows multiple selections.
In this article, I will explain everything about Power Apps’ combo box control, from what it is to how we can use it and its properties.
What is Power Apps Combo Box Control
In Power Apps, the combo box control is used to select an option from the list of options, and it also allows us to select multiple options. Unlike the Power Apps dropdown control, we can also search for the item you want to select in the combo box control.
If we want to search for items with any number from the Power Apps Combo box, we must first convert the numbers to text using the Text() function. Example: Text(1234).
To add a combo box control to the Power Apps screen, click the +Insert tab -> Under Input -> Select Combo box.
This way, we can add a Combo box control to the Power Apps screen.
Power Apps Combo box properties
Before working with Power Apps Combo box control, we must be aware of the properties that come under this control. These are:
- AccessibleLabel: It defines the screen label for
- BorderColor: The border color of a control.
- BorderStyle: Whether the border of a control is Solid, Dashed, Dotted, or None.
- BorderThickness: The width of a control’s border.
- Items: The data source from which decisions can be made.
- DefaultSelectedItems: The first item(s) selected before the user interacts with the control.
- DisplayFields: The Data pane in the Properties option tab is the simplest to configure. It displays a list of fields for each item returned by the search.
- DisplayMode: Whether the control accepts user input (Edit), displays data only (View), or is disabled (Disabled).
- FocusedBorderColor: The color of a control’s border when it is focused.
- FocusedBorderThickness: The thickness of a control’s border when it is focused.
- InputTextPlaceholder: End users are shown instructional text when no items are selected.
- OnChange: Actions to take when a user switches a choice.
- OnNavigate: When a user selects an item, the respective actions are taken.
- OnSelect: The mentioned actions are taken when a user taps or selects a control.
- TabIndex: Order of keyboard navigation in relation to other controls.
- Visible: Whether the control is visible or hidden.
- SelectedItems: List of items chosen as a result of user interaction.
- SelectMultiple: The user can choose between a single item and multiple items.
- IsSearchable: Whether or not the user can search for items before making a selection.
Power Apps Combo Box Example
Here’s an example of how to create a Power Apps Combo box control. Let’s manually add some items to make a combo box control. We will use the above combo box control to add some items without using a data source.
Select the combo box control and insert the below items into the combo box’s Items property.
Items = ["Texas", "Mexico", "Berlin", "Nice", "Toronto"]When we add the items listed above to the Power Apps combo box, the control will look like this, allowing us to select more than one item.
This is how to add custom values to the Power Apps combo box control.
Power Apps Combo Box Item Limit
Combo box controls are hard-coded to hold no more than 500 items. If a list contains a large number of choice values or selection values, the PowerApps combo box control will only display 500 items (selection values) at a time.
But if the list is within the Delegable limits (500 by default, but you can increase it to 2000), turn on the “Allow Searching” property. This will accomplish your goal by allowing the user to type in characters, and any names containing these characters will be displayed for selection.
How to Set Color to Power Apps Combo Box Control
Some color properties are available in the Power Apps combo box control that can be used to customize the color of combo box items, selections, chevrons, backgrounds, borders, hovers, and more.
All of these color properties can be found on the Combo box’s Properties panel. After selecting the dropdown, go to the right-side properties panel.
When we click on any color icon, it allows us to choose a color from the color chart or picker. We can choose the appropriate color based on standards and customs.
The above screen displays the list of standard colors. Once we click on any color, it will be applied to that property. Similarly, when we navigate to the Custom section, it allows us to choose the color and its transparency as per the requirement.
This is how to do Power Apps combo box color customizing.
Set Background Color For Power Apps Combo Box Control
In this section, we’ll look at how to change the background color of a Power Apps combo box control.
Select the Combo box control on the Power Apps screen and navigate to the right-side Properties panel. Under the Color property, there is a Fill option that visualizes the background color. Click on the option and select any color according to your business needs.
Suppose, we will select the light purple color. Once we select the color, we can see it will be applied to the background of the combo box control shown below:
We can also add an RGBA color code to the Fill property of the Power Apps combo box control.
In this way, we can set the background for the Power Apps combo box control.
How to Set Border Radius For Power Apps Combo Box Control
Do you want to work with Power apps combo box rounded corner radius? To answer your question, Microsoft does not provide this functionality in the Power Apps Combo box control. But there is another manual way by which we can build a rounded corner radius in a Power Apps combo box control.
We recently published an article in which we described how to build a Power Apps dropdown control with a rounded corner radius. We recommend you follow the link to get the answer. Make sure to use a combo box control instead of a Power Apps dropdown control.
Set Border Thickness For Power Apps Combo Box Control
Here, we will see how to work with Power Apps’ Combo box border thickness and how to set different kinds of borders and colors for the combo box control.
In the Power Apps combo box control, there is a property named BorderThickness. We can also find that property under the border in the right-side properties panel, which allows us to increase the border thickness of the control.
By default, the border’s thickness will show as 2; but we can customize the border thickness by increasing the number (Ex- 5). The difference is shown below:
Apart from this, it allows the user to customize the control’s border style to Dashed, Dotted, None, or Solid. Suppose we want to set the border style to Dashed in the Power Apps combo box control.
Similarly, we can set a color for the combo box control. To do this, click on the color picker and select any color according to the business requirement.
How to Search For an Item in Power Apps Combo Box Control
In this section, we’ll look at how to use the Power Apps combo box with type. That is, the user can choose items by typing their names. When several items are listed in a Power Apps combo box control, it can be awkward to scroll through them to find a specific item. The following steps remedy the situation.
- On the Power Apps screen, we have created a Combo box control by adding the below items in the Items property, such as:
Items = ["Texas", "Mexico", "Berlin", "Nice", "Toronto","Lincoln","New York","LA"]
- Next, set the toggle to ‘On‘ on the ‘Allow searching‘ (on the right-hand properties panel) or set the IsSearchable property to true.
IsSearchable = true
Now, play with the Combo box control in preview mode. Let’s select any item(s) by typing their names. Suppose we insert the alphabet ‘L’ on the control; it will show the item’s names that contain ‘L’ like below:
This is how we can work with the Power Apps Combox box that allows searching.
Set Tooltip For Power Apps Combo Box Control
A tooltip is a brief, informative message that appears when a user interacts with a graphical user interface element’s component (GUI). It is possible to display a tooltip on the Combo box control in Power Apps.
Under the Properties panel, there is a Tooltip option where we can insert a short message on the message box. Assume we give a tooltip, ‘Select the preferred job locations.’
With double quotes, we can also add a short message to the Tooltip properties.
Tooltips = "Select the preferred job locations"
To see the tooltips on the Combo box control, play the app in preview mode. We can see the tooltips while hovering over the Power Apps Combo box control.
This is how to set the tooltips on the Power Apps Combo box control.
Remove Background Color For Selected Item in Power Apps Combo Box
This section will show how to work with the Power Apps combo box to remove the selected value background color. That means while working with Power Apps combo box control, the selected items come with a background color like the below:
At a certain time, this looks odd. As per our requirement, we want to remove the background color from the selected items.
To do this, select the Combo box control and then the SelectionTagFill property. Next, remove the default expression and insert the expression as below:
SelectionTagFill = White
In this way, we can remove the background color for a selected item in the Power Apps combo box.
Remove Combo Box Selected Item in Power Apps
Let’s see how to remove the Power Apps combo box selected item. Look at the example below. I’m displaying the SharePoint list first name field values in the gallery control and the combo box control.
After selecting the combo box item, I removed it by clicking the remove item button; you can also refer to the gallery control; the item was removed.
Look at the SharePoint list that I used for the above Power Apps gallery and combo box control. The First Name is the Title column in the SharePoint list.
Follow the steps below to achieve this!
1. First, connect the SharePoint list with Power Apps. Then, add a Vertical Gallery control and provide the SharePoint list name in its Items property. Also, set its layout to Title.
2. Add a Power Apps Combo box control and provide the below formula in the Items property.
'Customer Contacts list'.TitleHere,
- Customer Contacts list = SharePoint list name.
- Title = Internal name of First Name field in SharePoint list.
3. Add a Button control to remove the combo box selected item. Then, provide the formula below for its OnSelect property.
RemoveIf('Customer Contacts list',Title=cmb_Title.Selected.FirstName)Here,
- cmb_Title = Combo box control name.
The syntax of the RemoveIf function is,
RemoveIf( DataSource, Condition [, ... ] )For the data source, we have given the SharePoint list name Customer Contacts list; for the condition, we are checking that the title matches the combo box selected item to the first name.
Now, save the changes and preview the app once. You can delete the Power Apps combo box selected item by clicking the button control, and for reference, you can check in the gallery control.
This way, we can remove the Power Apps combo box selected items.
I hope you found this article useful. I have explained the Power Apps combo box control and its properties, how to use it, how to remove the combo box selected items, and more.
You can follow this article if you are new to using the Power Apps combo box control.
Also, you may like the below Power Apps Tutorials:
- Concatenate Columns in Power Apps Combo Box
- How to Sort Combo Box Items in Power Apps
- How to Reset Power Apps Combo Box
- How to Patch a Collection in Power Apps
- How to Sort Power Apps Collection
- Power Apps Date Picker Control
After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.
