Search Bar (Pill)

The Search Bar (Pill) is a polished, fully rounded search input with a white background, soft drop shadow and a left-aligned magnifier — a friendlier, more consumer-grade take on the standard search field. The Clear button is enabled out of the box.

Palette:

Original palette · works in every Power Apps locale

Paste directly into Power Apps Studio

Rechercher...

YAML source

- SearchBarPill:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.Regular
      Fill: =RGBA(255, 255, 255, 1)
      Height: =36
      RadiusBottomLeft: =18
      RadiusBottomRight: =18
      RadiusTopLeft: =18
      RadiusTopRight: =18
      Width: =400
    Children:
      - SearchBarPillIcon:
          Control: Classic/Icon
          Properties:
            Color: =RGBA(150, 150, 150, 1)
            Height: =22
            Icon: =Icon.Search
            Width: =22
            X: =10
            Y: =7
      - SearchBarPillInput:
          Control: Classic/TextInput
          Properties:
            BorderColor: =RGBA(0, 0, 0, 0)
            BorderThickness: =0
            Clear: =true
            Default: =""
            DelayOutput: =true
            FocusedBorderThickness: =0
            Font: =Font.'Segoe UI'
            Height: =36
            HintText: ="Rechercher..."
            HoverBorderColor: =RGBA(0, 0, 0, 0)
            HoverFill: =RGBA(0, 0, 0, 0)
            PressedBorderColor: =RGBA(0, 0, 0, 0)
            Size: =11
            Width: =358
            X: =38

Common use cases

Consumer-style apps

Use it where a softer, app-store feel suits the audience — directories, catalogues, people finders.

Hero search

Feature it prominently on a landing screen as the primary way to start a task.

Card-grid filtering

Pair it above a gallery of cards to filter visually rich content.

How to use Search Bar (Pill) 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 — Customise HintText to describe what's searchable ('Search clients, projects…') so users know the scope at a glance.

Related forms components

Toggle

Date Picker

File Upload

Simple Dropdown