Filter Chips
Filter Chips render a horizontal row of selectable pills for fast, status-based filtering. The active chip takes a colored background while the rest stay neutral, giving users a tactile, one-tap way to slice a list. Items default to Tous, Complet, Incomplet and Non Traité but are fully editable.
Original palette · works in every Power Apps locale
Paste directly into Power Apps Studio
YAML source
- FilterChipsGallery:
Control: Gallery
Variant: galleryHorizontal
Properties:
BorderColor: =RGBA(0, 0, 0, 0)
Height: =36
Items: |-
=Table(
{ label: "Tous", color: RGBA(59, 130, 246, 1) },
{ label: "Complet", color: RGBA(34, 197, 94, 1) },
{ label: "Incomplet", color: RGBA(249, 115, 22, 1) },
{ label: "Non Traité", color: RGBA(184, 0, 0, 1) }
)
ShowScrollbar: =false
TemplatePadding: =4
TemplateSize: =110
Width: =500
Children:
- FilterChipBtn:
Control: Classic/Button
Properties:
Text: =ThisItem.label
Height: =32
Width: =106
BorderThickness: =0
Size: =11
Font: =Font.'Segoe UI'
RadiusBottomLeft: =16
RadiusBottomRight: =16
RadiusTopLeft: =16
RadiusTopRight: =16
Fill: |-
=If(
FilterChipsGallery.Selected.label = ThisItem.label,
ThisItem.color,
RGBA(240, 240, 240, 1)
)
HoverFill: =Self.Fill
PressedFill: =Self.Fill
Color: |-
=If(
FilterChipsGallery.Selected.label = ThisItem.label,
RGBA(255, 255, 255, 1),
RGBA(80, 80, 80, 1)
)
HoverColor: =Self.Color
PressedColor: =Self.Color
FontWeight: |-
=If(
FilterChipsGallery.Selected.label = ThisItem.label,
FontWeight.Semibold,
FontWeight.Normal
)
# The gallery's Selected item drives the active chip — bind
# FilterChipsGallery.Selected.label to your data filter.
OnSelect: =Select(Parent)Common use cases
Status filtering
Bind the selected chip to your gallery's Filter so users toggle between record states without a dropdown.
Category tabs
Use the chips as lightweight tabs to switch between content groups on a single screen.
Kanban-style views
Drive a board view where each chip focuses the gallery on one workflow stage.
How to use Filter Chips in Power Apps
- 1Open the component page — the YAML uses the invariant Power Fx syntax and works in every Power Apps locale.
- 2Click "Copy YAML" to copy the full component definition to your clipboard.
- 3In Power Apps Studio, open your screen in the Tree view and paste (Ctrl+V) — the component appears ready to use.
- 4Rebind the data-driven properties (Items, OnSelect, Fill, Text) to your own data source and theme.
Tip — Store the selected value in a context variable so the choice persists when users navigate away and back.