Drop down control in Power Apps
A list that shows only the first item unless the user opens it.
Description
A Drop down control conserves screen real estate, especially when the list contains a large number of choices. The control takes up only one line unless the user selects the chevron to reveal more choices. The control will show a maximum of 500 items.
Key properties
Default – The initial value of a control before the user specifies a different value.
Items – The source of data that contains the items that appear in the control. If the source has multiple columns, set the control's Value property to the column of data that you want to show.
Value – The column of data that you want to show in the control (for example, if a data source has multiple columns).
Selected – The data record that represents the selected item.
AllowEmptySelection – Whether the control can have no selected items. When false, there will always be a selected item, which will initially be the Default or the first item.
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.
ChevronBackground – The color behind the down arrow in a dropdown list.
ChevronFill – The color of the down arrow in a dropdown list.
Color – The color of text in a control.
DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.
DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.
DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.
Fill – The background color of a control.
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.
Font – The name of the family of fonts in which text appears.
FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.
Height – The distance between a control's top and bottom edges.
HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.
HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.
HoverFill – The background color of a control when the user keeps the mouse pointer on it.
Italic – Whether the text in a control is italic.
OnChange – Actions to perform when the user changes the value of a control (for example, by adjusting a slider).
OnSelect – Actions to perform when the user taps or clicks a control.
PaddingBottom – The distance between text in a control and the bottom edge of that control.
PaddingLeft – The distance between text in a control and the left edge of that control.
PaddingRight – The distance between text in a control and the right edge of that control.
PaddingTop – The distance between text in a control and the top edge of that control.
PressedBorderColor – The color of a control's border when the user taps or clicks that control.
PressedColor – The color of text in a control when the user taps or clicks that control.
PressedFill – The background color of a control when the user taps or clicks that control.
Reset – Whether a control reverts to its default value.
SelectedText (Deprecated) – A string value that represents the selected item. Use Dropdown1.SelectedText.Value instead, replacing "Dropdown1" with drop-down control name in the app.
SelectionColor – The text color of a selected item or items in a list or the color of the selection tool in a pen control.
SelectionFill – The background color of a selected item or items in a list or a selected area of a pen control.
Size – The font size of the text that appears on a control.
Strikethrough – Whether a line appears through the text that appears on a control.
TabIndex – Keyboard navigation order in relation to other controls.
Tooltip – Explanatory text that appears when the user hovers over a control.
Underline – Whether a line appears under the text that appears on a control.
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).
Note
Flyout border properties are controlled by FocusedBorder properties.
Examples
Simple list
Add a Drop down control, and then set its Items property to this expression:
["Seattle", "Tokyo", "London", "Johannesburg", "Rio de Janeiro"]Don't know how to add, name, and configure a control?
Show the items in the list by selecting the control's down arrow while pressing the Alt key.
List from a data source
The principles in this procedure apply to any data source that provides tables but, to follow these steps exactly, you must open an environment for which a Microsoft Dataverse database has been created and sample data added.
Open a blank app, and then specify the Accounts table.
Add a Drop down control, and set its Items property to this formula:
Distinct(Accounts, 'Address 1: City')This formula shows all the cities in the Accounts table. If more than one record has the same city, the Distinct function hides the duplication in your drop-down control.
(optional) Rename your Drop down control to Cities, add a vertical Gallery control, and set the gallery's Items property to this formula:
Filter(Accounts, address1_city = Cities.Selected.Result)This Filter function shows only those records in the Accounts table for which the city matches the selected value in the Cities control.
Accessibility guidelines
Color contrast
There must be adequate color contrast between:
- ChevronFill and ChevronBackground
- ChevronHoverFill and ChevronHoverBackground
- SelectionColor and SelectionFill
- SelectionFill and Fill
This is in addition to the standard color contrast requirements.
Screen reader support
- AccessibleLabel must be present.
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.