Forms & Inputs

Combobox Custom Labels

Added Aug 9, 2026

A single-select dropdown with rich two-line rows: a bold title plus a smaller muted description underneath each option. Click to browse, click a row to select. Options are fully configurable from the Settings tab. Inspired by the shadcn/ui Combobox (with custom items) component.

CopySnips Live Preview

How to Use

On the Settings tab, edit the "Options" list: each option has a Title (the selectable value) and an optional Description (shown as a smaller line underneath, e.g. a category or code). The Preview tab and the copyable YAML update together.
Paste the YAML into Power Apps Studio (Ctrl+V). Two independent GroupContainers are added: conComboCustomTrigger (the trigger box) and conComboCustomPanel (the list), positioned directly below it. They are NOT nested, every size is literal/self-referencing 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 DropDown). Click a row to select it and close the panel.
Each row is two decorative Labels (title + description) layered UNDER a transparent hit-target button that spans the whole row. This is what makes both lines clickable as one row, and why the button's Fill/HoverFill are semi-transparent (not solid) rather than the fully opaque hover used elsewhere in this library: a solid fill on top would hide the text underneath it. If the hover or selected tint looks too subtle or too strong in Studio, adjust the alpha (the 4th number in HoverFill's RGBA, e.g. RGBA(241,245,249,0.6)) on btnComboCustomItemHit.
conComboCustomPanel's Height adapts to the item count: Min(galComboCustomList.AllItemsCount * 44 + 16, 236), capping out once there are 5+ options (each row is 44px tall, taller than DropDown's 32px rows to fit two lines).
Selected value is stored in varComboCustomSelected (the Title text); read it anywhere in the app (e.g. If(!IsBlank(varComboCustomSelected), ...)). No OnVisible initialisation needed.

Problem Solved

Provides a single-select dropdown where each option needs more context than a flat label (a title plus a secondary detail line) which Power Apps has no native equivalent for.

Integration

The website builds a Power Fx array-of-records literal from your Options list and bakes it into the copied YAML as galComboCustomList.Items (columns: Label, Description). Read the chosen title from varComboCustomSelected. To swap the option list for a real data source later, replace the array in galComboCustomList.Items with a table/collection reference that has matching "Label"/"Description" columns (or adjust the ThisItem.Label / ThisItem.Description references throughout to match your column names).

- conComboCustomTrigger:
    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:
      - lblComboCustomSummary:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Left
            Color: =If(IsBlank(varComboCustomSelected), RGBA(148, 163, 184, 1), RGBA(15, 23, 42, 1))
            Font: =Font.'Open Sans'
            Height: =40
            Size: =11
            Text: =If(IsBlank(varComboCustomSelected), "Select country", varComboCustomSelected)
            VerticalAlign: =VerticalAlign.Middle
            Width: =194
            X: =12
            Y: =0
      - btnComboCustomOpen:
          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(varComboCustomOpen, !varComboCustomOpen)
            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
      - btnComboCustomChevron:
          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(varComboCustomOpen, !varComboCustomOpen)
            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
- conComboCustomPanel:
    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(galComboCustomList.AllItemsCount * 44 + 16, 236)
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Visible: =varComboCustomOpen
      Width: =240
      X: =20
      Y: =68
    Children:
      - galComboCustomList:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            DelayItemLoading: =false
            Fill: =RGBA(255, 255, 255, 1)
            Height: =Min(Self.AllItemsCount * 44, 220)
            Items: =[{Label:"Argentina",Description:"South America (ar)"}, {Label:"Australia",Description:"Oceania (au)"}, {Label:"Canada",Description:"North America (ca)"}, {Label:"France",Description:"Europe (fr)"}, {Label:"Japan",Description:"Asia (jp)"}, {Label:"Nigeria",Description:"Africa (ng)"}, {Label:"United States",Description:"North America (us)"}]
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =44
            Width: =240
            X: =0
            Y: =8
          Children:
            - lblComboCustomTitle:
                Control: Label@2.5.1
                Properties:
                  Align: =Align.Left
                  Color: =If(ThisItem.Label = varComboCustomSelected, RGBA(15, 23, 42, 1), RGBA(51, 65, 85, 1))
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Height: =22
                  Size: =10
                  Text: =ThisItem.Label
                  VerticalAlign: =VerticalAlign.Bottom
                  Width: =200
                  X: =12
                  Y: =4
            - lblComboCustomDescription:
                Control: Label@2.5.1
                Properties:
                  Align: =Align.Left
                  Color: =RGBA(148, 163, 184, 1)
                  Font: =Font.'Open Sans'
                  Height: =16
                  Size: =9
                  Text: =ThisItem.Description
                  VerticalAlign: =VerticalAlign.Top
                  Width: =200
                  X: =12
                  Y: =20
            - btnComboCustomItemHit:
                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: =If(ThisItem.Label = varComboCustomSelected, RGBA(248, 250, 252, 0.6), 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(241, 245, 249, 0.6)
                  OnSelect: =Set(varComboCustomSelected, ThisItem.Label); Set(varComboCustomOpen, false)
                  PressedBorderColor: =RGBA(0, 0, 0, 0)
                  PressedFill: =RGBA(226, 232, 240, 0.6)
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  Text: =""
                  Height: =44
                  Width: =240
                  X: =0
                  Y: =0
      - lblComboCustomEmpty:
          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(galComboCustomList.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

Combobox Custom Labels

Options

How to Use

Problem Solved

Integration

YAML Code

Implementation