Search bar with filter chips

A rounded search field with pill-shaped status chips that filter a list of result cards together, working on inline example data.

Overview

Search and quick filters in one block: a white search field with an icon, a row of pill-shaped chips and the matching results as cards with a status pill. The selected chip is stored in the context variable locSearchChipsFilter; the results filter on that and on the search text as you type.

The results list is part of the component so it works straight after pasting. If your screen already has a list, point its Items at the same filter and delete the results gallery.

When to use

Lists where people usually narrow down by one status and then search within it.
Up to six or seven chips; on narrow screens the row can be swiped sideways (no scrollbar is shown).

When not to use

Filters that combine several independent fields: use a filter panel with dropdowns.
Large data sources that need full-text search; use Dataverse search instead.

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernIcon	`1.1.1`
ModernTextInput	`1.1.2`
Gallery	`2.15.0`
ModernButton	`1.0.0`
ModernText	`1.0.0`
ModernBadge	`1.0.0`

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml

- SearchChipsRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      DropShadow: =DropShadow.None
      Height: =Parent.Height
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =12
      PaddingBottom: =16
      PaddingLeft: =16
      PaddingRight: =16
      PaddingTop: =16
      Width: =Parent.Width
    Children:
      - SearchChipsField:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            BorderColor: =ColorFade(App.Theme.Colors.Darker70, 85%)
            BorderThickness: =1
            DropShadow: =DropShadow.None
            Fill: =Color.White
            FillPortions: =0
            Height: =48
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =6
            LayoutMinHeight: =48
            LayoutMinWidth: =160
            PaddingLeft: =14
            PaddingRight: =6
            RadiusBottomLeft: =12
            RadiusBottomRight: =12
            RadiusTopLeft: =12
            RadiusTopRight: =12
          Children:
            - SearchChipsIcon:
                Control: ModernIcon@1.1.1
                Properties:
                  AccessibleLabel: ="Search"
                  Height: =20
                  Icon: ="Search"
                  IconColor: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  LayoutMinHeight: =20
                  LayoutMinWidth: =20
                  Width: =20
            - SearchChipsInput:
                Control: ModernTextInput@1.1.2
                Properties:
                  AccessibleLabel: ="Search requests"
                  Appearance: =Appearance.FilledLighter
                  BorderStyle: =BorderStyle.None
                  FillPortions: =1
                  Height: =40
                  LayoutMinHeight: =40
                  LayoutMinWidth: =120
                  Placeholder: ="Search requests by title"
                  Size: =14
      - SearchChipsGallery:
          Control: Gallery@2.15.0
          Variant: Horizontal
          Properties:
            AccessibleLabel: ="Status filters"
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =36
            Items: |
              =Table(
                  {Label: "All"},
                  {Label: "Open"},
                  {Label: "In progress"},
                  {Label: "Overdue"},
                  {Label: "Closed"}
              )
            LayoutMinHeight: =36
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =4
            TemplateSize: =112
          Children:
            - SearchChipsChip:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Appearance: |
                    =If(
                        ThisItem.Label = locSearchChipsFilter || (ThisItem.Label = "All" && IsBlank(locSearchChipsFilter)),
                        ButtonAppearance.Primary,
                        ButtonAppearance.Outline
                    )
                  Height: =Parent.TemplateHeight
                  OnSelect: |
                    =UpdateContext({
                        locSearchChipsFilter: If(ThisItem.Label = "All" || ThisItem.Label = locSearchChipsFilter, "", ThisItem.Label)
                    })
                  RadiusBottomLeft: =16
                  RadiusBottomRight: =16
                  RadiusTopLeft: =16
                  RadiusTopRight: =16
                  Size: =13
                  Text: =ThisItem.Label
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0
      - SearchChipsResults:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="Search results"
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding
            Items: |
              =Filter(
                  Table(
                      {Title: "Replace fire extinguisher, hall B", Site: "Warehouse Ghent", Status: "Overdue"},
                      {Title: "Check emergency lighting", Site: "Office Leuven", Status: "In progress"},
                      {Title: "Annual forklift inspection", Site: "Warehouse Ghent", Status: "Open"},
                      {Title: "Repaint loading dock lines", Site: "Depot Antwerp", Status: "Open"},
                      {Title: "Update first-aid kit, office 2", Site: "Office Leuven", Status: "In progress"},
                      {Title: "Fix gate sensor, car park", Site: "Depot Antwerp", Status: "Closed"}
                  ),
                  (IsBlank(locSearchChipsFilter) || Status = locSearchChipsFilter) &&
                  (IsBlank(SearchChipsInput.Text) || SearchChipsInput.Text in Title)
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =4
            TemplateSize: =60
          Children:
            - SearchChipsResult:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
                  BorderThickness: =1
                  DropShadow: =DropShadow.None
                  Fill: =Color.White
                  Height: =Parent.TemplateHeight
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutGap: =12
                  PaddingLeft: =14
                  PaddingRight: =12
                  RadiusBottomLeft: =10
                  RadiusBottomRight: =10
                  RadiusTopLeft: =10
                  RadiusTopRight: =10
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0
                Children:
                  - SearchChipsResultText:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        DropShadow: =DropShadow.None
                        FillPortions: =1
                        Height: =42
                        LayoutDirection: =LayoutDirection.Vertical
                        LayoutGap: =2
                        LayoutMinHeight: =42
                        LayoutMinWidth: =80
                      Children:
                        - SearchChipsResultTitle:
                            Control: ModernText@1.0.0
                            Properties:
                              AccessibleLabel: =Self.Text
                              AlignInContainer: =AlignInContainer.Stretch
                              FontWeight: =FontWeight.Semibold
                              Height: =22
                              LayoutMinHeight: =0
                              LayoutMinWidth: =60
                              PaddingBottom: =0
                              PaddingTop: =0
                              Size: =14
                              Text: =ThisItem.Title
                              Wrap: =false
                        - SearchChipsResultSite:
                            Control: ModernText@1.0.0
                            Properties:
                              AccessibleLabel: =Self.Text
                              AlignInContainer: =AlignInContainer.Stretch
                              Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                              Height: =18
                              LayoutMinHeight: =0
                              LayoutMinWidth: =60
                              PaddingBottom: =0
                              PaddingTop: =0
                              Size: =12
                              Text: =ThisItem.Site
                              Wrap: =false
                  - SearchChipsResultStatus:
                      Control: ModernBadge@1.0.0
                      Properties:
                        AccessibleLabel: ="Status " & ThisItem.Status
                        Appearance: =BadgeAppearance.Tint
                        Content: =ThisItem.Status
                        Height: =24
                        Intent: =Switch(ThisItem.Status, "Overdue", BadgeIntent.Critical, "In progress", BadgeIntent.Informative, "Closed", BadgeIntent.Positive, BadgeIntent.Neutral)
                        LayoutMinHeight: =24
                        LayoutMinWidth: =88
                        Size: =12
                        Width: =96

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

`Items` on `SearchChipsGallery`

The chips. Keep an "All" row first; selecting the active chip again also goes back to all.

In the YAML

YAML

Items: |
  =Table(
      {Label: "All"},
      {Label: "Open"},
      {Label: "In progress"},
      {Label: "Overdue"},
      {Label: "Closed"}
  )

Your version

YAML

Items: |
  =Table(
      {Label: "All"},
      {Label: "Mine"},
      {Label: "This week"}
  )

`Items` on `SearchChipsResults`

What the search and the chips filter. StartsWith delegates to Dataverse and SharePoint; in does not.

In the YAML

YAML

Items: |
  =Filter(
      Table(
          {Title: "Replace fire extinguisher, hall B", Site: "Warehouse Ghent", Status: "Overdue"},
          {Title: "Check emergency lighting", Site: "Office Leuven", Status: "In progress"},
          {Title: "Annual forklift inspection", Site: "Warehouse Ghent", Status: "Open"},
          {Title: "Repaint loading dock lines", Site: "Depot Antwerp", Status: "Open"},
          {Title: "Update first-aid kit, office 2", Site: "Office Leuven", Status: "In progress"},
          {Title: "Fix gate sensor, car park", Site: "Depot Antwerp", Status: "Closed"}
      ),
      (IsBlank(locSearchChipsFilter) || Status = locSearchChipsFilter) &&
      (IsBlank(SearchChipsInput.Text) || SearchChipsInput.Text in Title)
  )

Your version

YAML

Items: |
  =Filter(
      Requests,
      (IsBlank(locSearchChipsFilter) || Status = locSearchChipsFilter) &&
      StartsWith(Title, SearchChipsInput.Text)
  )

`Placeholder` on `SearchChipsInput`

The hint in the empty field. Say what people can search for.

In the YAML

YAML

Placeholder: ="Search requests by title"

Your version

YAML

Placeholder: ="Search by title or site"

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, SearchChipsRoot, with all its controls inside.
Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Search bar with filter chips

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Items on SearchChipsGallery

Items on SearchChipsResults

Placeholder on SearchChipsInput

How to paste

When Studio flags a control version

`Items` on `SearchChipsGallery`

`Items` on `SearchChipsResults`

`Placeholder` on `SearchChipsInput`