Forms & Inputs

DropDown Multiple

Added Aug 6, 2026

A multi-select dropdown: click to toggle several options on/off, with a text summary of what's picked shown on the closed trigger. Options are fully configurable from the Settings tab. Inspired by the shadcn/ui Combobox (multiple) component.

CopySnips Live Preview

How to Use

On the Settings tab, edit the "Options" list to add, remove, or rename the choices. The Preview tab and the copyable YAML update together.
Paste the YAML into Power Apps Studio (Ctrl+V). Two independent GroupContainers are added: conDropdownMultiTrigger (the trigger box) and conDropdownMultiPanel (the checklist), positioned directly below it. They are NOT nested, every size is literal instead of computed from cross-referenced siblings, which is more reliable in ManualLayout.
Click anywhere on the rectangle, or the arrow icon, to open the list; click either one again to close it (a simple toggle, same as the single-select Combobox). The closed trigger shows a plain-text summary of what's picked (e.g. "PowerApps, Dataverse", truncated with "…" past 28 characters) rather than individual removable chip pills, a deliberate simplification for reliability (per-chip remove buttons layered inside the trigger would conflict with "click empty space to open" in PA's bounding-box hit testing).
Inside the open panel, clicking a row toggles it in or out of the selection. The panel stays open afterward so you can pick several options in one session. Selected rows get a persistent light background, bold dark text, and a "✓ " prefix. To remove a selection, reopen the panel and click its row again.
Selected values are stored in the colDropdownMultiSelected Collection (each row is {Value: "..."}); read them anywhere in the app (e.g. CountRows(colDropdownMultiSelected), or Concat(colDropdownMultiSelected, Value, ", ") for a display string). No OnVisible initialisation needed: Collections start empty by default; if you want some options pre-selected, add Collect(colDropdownMultiSelected, {Value: "PowerApps"}) to App.OnStart or the screen's OnVisible.
conDropdownMultiPanel's Height adapts to the item count: Min(galDropdownMultiList.AllItemsCount * 32 + 16, 176), capping out at 176px (matching the Gallery's own 160px max + 16px padding) once there are 5+ options. If you move conDropdownMultiTrigger, move conDropdownMultiPanel's X/Y to match (they're independent, not auto-following).

Problem Solved

Provides a compact, click-to-toggle multi-select dropdown with a custom shadcn-style look, which Power Apps has no native equivalent for (the closest native control, a multi-select Classic/ComboBox, has a different visual style and property model).

Integration

The website builds a Power Fx array literal from your Options list and bakes it into the copied YAML as galDropdownMultiList.Items. Read the chosen values from the colDropdownMultiSelected Collection. To swap the option list for a real data source later, replace the array in galDropdownMultiList.Items with a table/collection reference (keep the same "Value" column name, or adjust ThisItem.Value references throughout to match your column name).

- conDropdownMultiTrigger:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      Fill: =RGBA(0, 0, 0, 0)
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.None
      Height: =40
      Width: =240
      X: =20
      Y: =20
    Children:
      - lblDropdownMultiSummary:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            Color: =If(CountRows(colDropdownMultiSelected) = 0, RGBA(148, 163, 184, 1), RGBA(15, 23, 42, 1))
            Font: =Font.'Open Sans'
            Height: =40
            Size: =11
            Text: =If(CountRows(colDropdownMultiSelected) = 0, "Select products...", If(Len(Concat(colDropdownMultiSelected, Value, ", ")) > 28, Left(Concat(colDropdownMultiSelected, Value, ", "), 28) & "…", Concat(colDropdownMultiSelected, Value, ", ")))
            VerticalAlign: =VerticalAlign.Middle
            Width: =194
            X: =12
            Y: =0
      - btnDropdownMultiOpen:
          Control: Classic/Button@2.2.0
          Properties:
            Align: =Align.Left
            BorderColor: =RGBA(0, 0, 0, 0)
            BorderStyle: =BorderStyle.None
            Color: =RGBA(0, 0, 0, 0)
            DisabledBorderColor: =RGBA(226, 232, 240, 1)
            Fill: =RGBA(0, 0, 0, 0)
            FocusedBorderColor: =RGBA(0, 0, 0, 0)
            FocusedBorderThickness: =0
            Font: =Font.'Open Sans'
            HoverBorderColor: =RGBA(0, 0, 0, 0)
            HoverColor: =RGBA(0, 0, 0, 0)
            HoverFill: =RGBA(0, 0, 0, 0)
            OnSelect: =Set(varDropdownMultiOpen, !varDropdownMultiOpen)
            PressedBorderColor: =RGBA(0, 0, 0, 0)
            PressedFill: =RGBA(0, 0, 0, 0)
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Text: =""
            Height: =40
            Width: =240
            X: =0
            Y: =0
      - btnDropdownMultiChevron:
          Control: Classic/Button@2.2.0
          Properties:
            Align: =Align.Center
            BorderColor: =RGBA(0, 0, 0, 0)
            BorderStyle: =BorderStyle.None
            Color: =RGBA(148, 163, 184, 1)
            DisabledBorderColor: =RGBA(226, 232, 240, 1)
            Fill: =RGBA(0, 0, 0, 0)
            FocusedBorderColor: =RGBA(0, 0, 0, 0)
            FocusedBorderThickness: =0
            Font: =Font.'Open Sans'
            HoverBorderColor: =RGBA(0, 0, 0, 0)
            HoverColor: =RGBA(71, 85, 105, 1)
            HoverFill: =RGBA(241, 245, 249, 1)
            OnSelect: =Set(varDropdownMultiOpen, !varDropdownMultiOpen)
            PressedBorderColor: =RGBA(0, 0, 0, 0)
            PressedFill: =RGBA(226, 232, 240, 1)
            RadiusBottomLeft: =0
            RadiusBottomRight: =8
            RadiusTopLeft: =0
            RadiusTopRight: =8
            Size: =12
            Text: ="▾"
            VerticalAlign: =VerticalAlign.Middle
            Height: =40
            Width: =34
            X: =206
            Y: =0
- conDropdownMultiPanel:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.Bold
      Fill: =RGBA(255, 255, 255, 1)
      Height: =Min(galDropdownMultiList.AllItemsCount * 32 + 16, 176)
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Visible: =varDropdownMultiOpen
      Width: =240
      X: =20
      Y: =68
    Children:
      - galDropdownMultiList:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            DelayItemLoading: =false
            Fill: =RGBA(255, 255, 255, 1)
            Height: =Min(Self.AllItemsCount * 32, 160)
            Items: =["PowerApps", "Power Automate", "Copilot Studio", "Dataverse"]
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =32
            Width: =240
            X: =0
            Y: =8
          Children:
            - btnDropdownMultiItemHit:
                Control: Classic/Button@2.2.0
                Properties:
                  Align: =Align.Left
                  BorderColor: =RGBA(0, 0, 0, 0)
                  BorderStyle: =BorderStyle.None
                  Color: =If(CountRows(Filter(colDropdownMultiSelected, Value = ThisItem.Value)) > 0, RGBA(15, 23, 42, 1), RGBA(51, 65, 85, 1))
                  DisabledBorderColor: =RGBA(226, 232, 240, 1)
                  Fill: =If(CountRows(Filter(colDropdownMultiSelected, Value = ThisItem.Value)) > 0, RGBA(248, 250, 252, 1), RGBA(255, 255, 255, 1))
                  FocusedBorderColor: =RGBA(0, 0, 0, 0)
                  FocusedBorderThickness: =0
                  Font: =Font.'Open Sans'
                  FontWeight: =If(CountRows(Filter(colDropdownMultiSelected, Value = ThisItem.Value)) > 0, FontWeight.Semibold, FontWeight.Normal)
                  HoverBorderColor: =RGBA(0, 0, 0, 0)
                  HoverColor: =Self.Color
                  HoverFill: =RGBA(241, 245, 249, 1)
                  OnSelect: '=If(CountRows(Filter(colDropdownMultiSelected, Value = ThisItem.Value)) > 0, Remove(colDropdownMultiSelected, Filter(colDropdownMultiSelected, Value = ThisItem.Value)), Collect(colDropdownMultiSelected, {Value: ThisItem.Value}))'
                  PaddingLeft: =12
                  PressedBorderColor: =RGBA(0, 0, 0, 0)
                  PressedFill: =RGBA(226, 232, 240, 1)
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  Size: =11
                  Text: =If(CountRows(Filter(colDropdownMultiSelected, Value = ThisItem.Value)) > 0, "✓ ", "") & ThisItem.Value
                  VerticalAlign: =VerticalAlign.Middle
                  Height: =32
                  Width: =240
                  X: =0
                  Y: =0
      - lblDropdownMultiEmpty:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            Color: =RGBA(148, 163, 184, 1)
            Font: =Font.'Open Sans'
            Height: =24
            Size: =11
            Text: ="No items found."
            VerticalAlign: =VerticalAlign.Middle
            Visible: =CountRows(galDropdownMultiList.AllItems) = 0
            Width: =240
            X: =0
            Y: =8

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

DropDown Multiple

Options

How to Use

Problem Solved

Integration

YAML Code

Implementation