Creating a Dropdown Menu or Combo List using the HTML Select Tag

To create drop-down menus for selecting values, you can use the HTML select tag. This tag draws the items that appear in the control from a data source.

A list that displays solely the initial element until the user expands it.

Description

To save screen space, a drop-down menu can be used when presenting a long list of options. The menu only takes up one line initially, and more options are revealed when the user clicks on the chevron. It is important to note that the menu can display up to 500 items.

Key properties

The default value is the value assigned to a control when a user has not yet specified a different value.

The control’s items are retrieved from a data source. If the source has multiple columns, you can set the control’s Value property to display the desired column of data.

The data column that you choose to display in the control is referred to as the value. This can be any column from a data source that contains multiple columns.

– The chosen item is reflected by the data record that has been selected.

The “AllowEmptySelection” option determines if the control will display a blank selection when no item has been chosen. Users can also clear their selections by choosing the blank item.

Additional properties

Screen reader label that is easily accessible.

The BorderColor refers to the hue of the boundary that encloses a particular control.

The BorderStyle property determines the type of border that a control has. It can be set to Solid, Dashed, Dotted, or None.

The thickness of a control’s border is referred to as BorderThickness.

ChevronBackground refers to the color that appears behind the downward arrow in a dropdown menu.

ChevronFill is the hue assigned to the downward arrow visible within a selection menu.

The text color within a control.

The DisplayMode property defines the state of the control. It can either enable user input (Edit), show data without allowing any modifications (View), or disable the control altogether (Disabled).

The color of the border for a control in its Disabled state is referred to as DisabledBorderColor.

This property pertains to the color of text within a control that has been disabled, which is indicated by setting the control’s DisplayMode property to “Disabled”.

The disabled state of a control is indicated by its background color when its DisplayMode property is set to “Disabled”.

Set the control’s background color.

The border color of a control changes when it is focused.

The thickness of a control’s border changes when the control is focused, which is known as FocusedBorderThickness.

The font refers to the typeface that is used to display the text.

The control’s text weight is determined by its font weight, which can be Bold, Semibold, Normal, or Lighter.

The vertical measurement of a control is referred to as its height, which is the distance between its top and bottom edges.

The color that a control’s border takes on when a user hovers their mouse pointer over it.

HoverColor refers to the color that appears on the text of a control when the user hovers their mouse pointer over it.

HoverFill refers to the color that appears as the background of a control when the user hovers over it with their mouse pointer.

The attribute of italicization pertains to the text in a control.

The OnChange event is triggered when a user modifies the value of a control, such as by moving a slider, and can be used to specify the actions that should be taken in response to this change.

The OnSelect event refers to the actions that are triggered when a user taps or clicks on a control.

PaddingBottom refers to the space between the text within a control and the lower boundary of the same control.

PaddingLeft refers to the space or distance that exists between the left edge of a control and the text within it.

PaddingRight is the space between the text of a control and its corresponding right boundary.

PaddingTop refers to the space between the top edge of a control and the text within that control.

The hue of a control’s border when a user taps or clicks the respective control is referred to as PressedBorderColor.

The color of text in a control changes when the user taps or clicks that control.

PressedFill refers to the color that appears in the background of a control when it is tapped or clicked by the user.

The option to reset a control to its default value.

The deprecated “SelectedText” string value that represented the selected item can be replaced with “Dropdown1.SelectedText.Value”. Simply replace “Dropdown1” with the name of the drop-down control used in the app.

The SelectionColor refers to the color of the text of a selected item or items in a list, as well as the color of the selection tool in a pen control.

SelectionFill refers to the color of the background when an item or group of items is selected in a list or a certain section of a pen control.

– Control Font Size
– Refers to the size of the font used in a control’s text.

Strikethrough refers to the presence of a line that appears within the text displayed on a control.

TabIndex refers to the order in which controls are navigated using the keyboard.

A tooltip is a type of text that provides an explanation when a user hovers over a control.

The presence of a line beneath the text displayed on a control is indicated by an underline.

Controls can be either visible or hidden based on their display status.

Width is defined as the measurement of the distance between the left and right boundaries of a control.

X refers to the space between the left side of a control and the corresponding left side of its container. If there is no parent container, then the screen serves as the container.

Y represents the vertical distance between the top edge of a control and that of its parent container, or the screen if there is no parent container.

Note

The properties that control the border of the flyout are the FocusedBorder properties.

Examples

Simple list
  1. 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?

  2. Show the items in the list by selecting the control’s down arrow while pressing the Alt key.

List from a data source

These steps can be applied to any data source that offers tables. However, to execute the procedure precisely, you need to launch an environment that has a Microsoft Dataverse database with sample data included.

  1. Open a blank app, and then specify the

    Accounts

    table.

  2. 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.

  3. (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

Sufficient contrast in color must be ensured between:

  • ChevronFill and ChevronBackground can be restated as the fill and background of a chevron design.
  • ChevronHoverFill” and “ChevronHoverBackground” are two distinct styles that can be applied to enhance the appearance of the chevron design.
  • The properties of color and fill for selected items are referred to as SelectionColor and SelectionFill.
  • Fill” and “SelectionFill” are two options for filling an object or shape.

This requirement is an extra measure, apart from the usual color contrast standards.

Screen reader support
  • The presence of AccessibleLabel is mandatory.
Keyboard support
  • To allow keyboard users to navigate to it, the TabIndex value should not be negative.
  • Ensure that focus indicators are easily discernible by utilizing the properties FocusedBorderColor and FocusedBorderThickness.

Frequently Asked Questions