Combo box control in PowerApps

A control that allows users to make selections from provided choices. Supports search and multiple selections.

Description

A Combo box control allows you to search for items you will select. The search is performed server-side on the SearchField property so performance is not affected by very large data sources.

Single or multi-select mode is configured via the SelectMultiple property.

When searching for items to select, for each item you can choose to show a single data value, two values, or a picture and two values (Person) by modifying the Layout settings in the Data pane.

People picker

To use Combo box as a people picker, choose the Person template from the Layout settings in the Data pane and configure the related data properties to be shown for the person below.

Key properties

Items – The source of data from which selections can be made.

DefaultSelectedItems – The initial selected item(s) before the user interacts with the control.

SelectedItems – List of selected items resulting from user interaction.

SelectMultiple – Whether the user can select a single item or multiple items.

IsSearchable – Whether the user can search for items before selecting.

SearchFields - The data fields of the data source searched when user is entering text. To search on multiple fields, set ComboBox1.SearchFields = ["MyFirstColumn", "MySecondColumn"]

Additional properties

AccessibleLabel – Label for screen readers.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

DisplayFields – List of fields shown for each item returned by the search. Easiest to configure via the Data pane in the Properties option tab.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

Height – The distance between a control's top and bottom edges.

InputTextPlaceholder – Instructional text shown to end-users when no items are selected.

OnChange – How the app responds when the user changes a selection.

OnNavigate – How the app responds when the user clicks on an item.

OnSelect – How the app responds when the user taps or clicks a control.

TabIndex – Keyboard navigation order in relation to other controls.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Example

  1. On the Insert tab, open the Controls menu, and then select Combo box.

  2. On the Properties tab of the right-hand pane, open the Select a data source list (next to Items), and then add or select a data source.

  3. On the same tab, select Edit (next to Fields).

  4. In the Data pane, open the Primary text list, and then select the column that you want to show in the Combo box control.

  5. While holding down the Alt key, select the down arrow to open the Combo box control.

    The control shows the data from the column that you specified in the data source that you specified.

  6. (optional) To show the first record by default, set the DefaultSelectedItems property to this expression, replacing DataSource with the name of your data source:

    First(DataSource)

Accessibility guidelines

Color contrast

There must be adequate color contrast between:

  • ChevronFill and ChevronBackground
  • ChevronHoverFill and ChevronHoverBackground
  • SelectionColor and SelectionFill
  • SelectionFill and Fill
  • SelectionTagColor and SelectionTagFill

This is in addition to the standard color contrast requirements.

Screen reader support

  • AccessibleLabel must be present.

    Note

    On touch screens, screen reader users can navigate the contents of the combo box sequentially. The combo box acts as a button that shows or hides its contents when selected.

Keyboard support

  • TabIndex must be zero or greater so that keyboard users can navigate to it.

  • Focus indicators must be clearly visible. Use FocusedBorderColor and FocusedBorderThickness to achieve this.

    Note

    The tab key navigates to or away from the combo box. Arrow keys navigate the contents of the combo box. The escape key closes the drop down when opened.