Power Apps List box Control [Complete Guide]

Did you know how to work with a List box control in Power Apps? If not, I hope this Power Apps tutorial will help you understand everything about Power Apps List box control and its uses.

Additionally, we will learn key properties of a Power Apps list box control and how to add a list box in Power Apps.

Furthermore, you will know how to add items to the Power Apps list box and get the selected values in Power Apps with various examples.

Power Apps List box Control

Power Apps list box is a user control that displays a list of items, allowing users to select one or more options.

You can use the “Items” property of the list box control to add items.

The List Box control in Power Apps differs from the drop-down control in that, unlike the Radio control, it always shows all available options and allows users to pick several items simultaneously.

Refer to the image below for how a Power Apps List box control looks like:

Power Apps List box Control

This is the overview of the Power Apps List box control.

Power Apps List box Properties

In this section, I will explain the properties of the Power Apps list box control.

Property NameDescription
AccessibleLabelThis property is assigned to a screen reader label.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
DefaultWhen the user opens the app, we can specify the value to be selected.
DisabledBorderColorWhen the DisplayMode property of the control is set to Disabled, it indicates a color for the control’s border.
DisabledColorWe can define the color of a text when the display mode property is set to “Disabled.”
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
FillThis property displays the background color of the control.
HoverColorWe can define the color of a text when the user clicks on a control.
ItemsTo represent the values in a list box, we can specify the data source and the column name; otherwise, we can provide it manually.
OnChangeWhen the user changes a value, it specifies what action to perform.
OnSelectWhen the user clicks on a control, it specifies what action to perform.
PressedColorWhether the user can select one or more values from a list box control.
ResetWe can reset the list box selected value to its default value or blank.
SelectionFillWe can define the background color of the selected item in a list of items.
SelectMultipleWheather the user can select one or more values from a list box control.
TabIndexThis refers to the keyboard navigation sequence that is related to other controls.
VisibleHere, we can specify whether the List box control can be visible.

These are the properties of a Power Apps list box control.

How to add a Power Apps List box Control

Here, I will show you how to insert a list box control in Power Apps:

  • Sign in to Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert a List box control.[Click on +Insert -> Expand Input -> Select List box].
Power Apps List box control
  • The List box control will appear like the screenshot below.
Add Power Apps list box control
  • By default, the toggle control name will be “ListBox1“; you can Rename it using “lst” based on your requirement.
How to add List box in Power Apps

This is how to insert a Power Apps List box control. Then, let us see how to add items to the above list box.

Add items to the Power Apps List box control

Power Apps allows us to manually add items to a List box control from other sources like SharePoint, Excel, Collections, etc.

So, let us check how to bind values to a Power Apps List box manually and from a SharePoint list.

1. Power Apps List box add items manually

Here, I will show you how to add items manually in the Power Apps List box control.

  • On the Power Apps screen, insert a List box control -> Set its Items property to:
 [
    "Power Apps",
    "Power Automate",
    "Power Bi",
    "Power Virtual Agent"
]
How to use Power Apps list box control
  • Now, I will rename the List box control to “lst_PowerPlatform” as shown below:
Add items to the Power Apps List box control
  • SavePublish, and Preview the app. Now, the list box control contains the items that we added manually.
How to work with Power Apps List box

This is how to add items manually in the Power Apps List box control.

2. Populate Power Apps List box items from a SharePoint list

Here, I will explain how to bind the List box values using a SharePoint list as a data source in Power Apps.

For this, I have a SharePoint list [Project Details] with a column below:

Column NameData type
Project NameTitle
Project Start DateDate and time
Project Handled ByPerson and group
Project Approved or notYes/no
Populate Power Apps List box items from a SharePoint list

We will bind the above list Title column values to a Power Apps list box control like the screenshot below.

Bind Power Apps List box items from a SharePoint list

To work around this example, create a blank canvas app by using the SharePoint list and follow the below steps:

  • On the Power Apps screen, insert a List box control -> Set its Items property to:
Distinct(
    'Project Details',
    Title
)

Where,

  1. Project Details = SharePoint list name
  2. Title = SharePoint list title column
How to bind list box values from SharePoint list
  • SavePublish, and Preview the app. The Power Apps List box control now contains the values from the above SharePoint list title column.
Power Apps List box SharePoint list

This is how to bind items to a Power Apps List box control from a SharePoint list.

Power Apps List box Get Selected Values

This section will explain how to get the selected values of a Power Apps List box.

Example:

I have created a Blank canvas and added a List box that contains the “Loan Types” [Which I added manually].

Whenever the user selects a single or multiple values from the list box, that selected value will display on the Text label.

Power Apps list box get selected values

Follow the below steps to achieve it:

  • On the Power Apps screen, Insert a List box -> Set its Items property to:
[
"Home Loan", 
"Gold Loan', 
"Car Loan"
]
List box get selected values in Power Apps
  • Insert a Text label -> Set its Text property to:
Concat(
    lsb_LoanType.SelectedItems,
    Value & ","
)

Where,

  1. lsb_LoanType = List box control name
Get selected values of a Power Apps list box
  • SavePublish, and Preview the app. Now, when the user selects multiple values from the list box control, those selected values will be displayed on a text label.
How to get selected values of a Power Apps list box

This is how we can get a Power Apps List box selected values.

Conclusion

I hope this Power Apps tutorial gave you complete information about “Power Apps List box control.”

Moreover, I have taught you the key properties of a Power Apps list box control and many more:

  1. How to add a list box in Power Apps
  2. Add items to the Power Apps list box
  3. How to get the selected values in Power Apps List box control

Additionally, you may like some more Power Apps tutorials: