Forms & Inputs

DropDown

Added Aug 6, 2026

A dropdown select with a searchable list: click to browse options, click again to select. Options are fully configurable from the Settings tab. Inspired by the shadcn/ui Combobox 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: conComboboxTrigger (the input) and conComboboxPanel (the dropdown list), positioned directly below it. They are NOT nested, this keeps every size 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). Behind the scenes these are two always-on-top transparent Classic/Buttons (btnComboboxOpen for the full rectangle, btnComboboxChevron for the arrow), both flipping the same varComboboxOpen boolean. inputComboboxQuery is a read-only display (DisplayMode.View) showing the current selection. Classic/TextInput has no click event separate from typing, so an overlay that supports click-to-close can't also stay open for live typing; this version favors the reliable toggle. The arrow gets its own gray hover highlight (HoverFill/HoverColor), separate from the rectangle's.
conComboboxPanel's Height adapts to the item count: Min(galComboboxList.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 conComboboxTrigger, move conComboboxPanel's X/Y to match (they're independent, not auto-following).
The panel also closes whenever you select an item. (Click-outside-to-close isn't reliably available in Classic PA controls.)
Selected value is stored in varComboboxSelected; read it anywhere in the app (e.g. If(!IsBlank(varComboboxSelected), ...)).
No OnVisible initialisation needed: every variable defaults to blank/falsy correctly on load.

Problem Solved

Provides a compact, click-to-toggle single-select dropdown with a custom shadcn-style look, which Power Apps has no native equivalent for (the closest native control, 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 galComboboxList.Items. Read the chosen value from varComboboxSelected. To swap the option list for a real data source later, replace the array in galComboboxList.Items with a table/collection reference (keep the same "Value" column name, or adjust ThisItem.Value references throughout to match your column name).

- conComboboxTrigger:
    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:
      - inputComboboxQuery:
          Control: Classic/TextInput@2.3.2
          Properties:
            BorderColor: =RGBA(226, 232, 240, 1)
            BorderThickness: =1
            Color: =RGBA(15, 23, 42, 1)
            Default: =varComboboxSelected
            DisplayMode: =DisplayMode.View
            Font: =Font.'Open Sans'
            Height: =40
            HintText: ="Select a product"
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Size: =11
            Width: =240
            X: =0
            Y: =0
      - btnComboboxOpen:
          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(varComboboxOpen, !varComboboxOpen)
            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
      - btnComboboxChevron:
          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(varComboboxOpen, !varComboboxOpen)
            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
- conComboboxPanel:
    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(galComboboxList.AllItemsCount * 32 + 16, 176)
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Visible: =varComboboxOpen
      Width: =240
      X: =20
      Y: =68
    Children:
      - galComboboxList:
          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:
            - btnComboboxItemHit:
                Control: Classic/Button@2.2.0
                Properties:
                  Align: =Align.Left
                  BorderColor: =RGBA(0, 0, 0, 0)
                  BorderStyle: =BorderStyle.None
                  Color: =If(ThisItem.Value = varComboboxSelected, RGBA(15, 23, 42, 1), RGBA(51, 65, 85, 1))
                  DisabledBorderColor: =RGBA(226, 232, 240, 1)
                  Fill: =RGBA(255, 255, 255, 1)
                  FocusedBorderColor: =RGBA(0, 0, 0, 0)
                  FocusedBorderThickness: =0
                  Font: =Font.'Open Sans'
                  FontWeight: =If(ThisItem.Value = varComboboxSelected, FontWeight.Semibold, FontWeight.Normal)
                  HoverBorderColor: =RGBA(0, 0, 0, 0)
                  HoverColor: =Self.Color
                  HoverFill: =RGBA(241, 245, 249, 1)
                  OnSelect: =Set(varComboboxSelected, ThisItem.Value); Set(varComboboxOpen, false)
                  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: =ThisItem.Value
                  VerticalAlign: =VerticalAlign.Middle
                  Height: =32
                  Width: =240
                  X: =0
                  Y: =0
      - lblComboboxEmpty:
          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(galComboboxList.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

Options

How to Use

Problem Solved

Integration

YAML Code

Implementation