FREEforms

Search Bar

The Search Bar combines a magnifier icon and a text input inside a single rounded container, giving users an instantly recognisable way to filter content. It's a foundational pattern for any screen that lists records, files or people.

Palette:

Original palette · works in every Power Apps locale

Paste directly into Power Apps Studio

Search...

YAML source

# Search Bar — PowerBlocks (FREE)
# Read the typed text anywhere with SearchInput.Text.

- SearchBar:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      Width: =320
      Height: =44
      Fill: =RGBA(38, 38, 38, 1)
      BorderColor: =RGBA(64, 64, 64, 1)
      BorderThickness: =1
      RadiusTopLeft: =8
      RadiusTopRight: =8
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      DropShadow: =DropShadow.None
    Children:
      - SearchIcon:
          Control: Classic/Icon
          Properties:
            Icon: =Icon.Search
            Width: =18
            Height: =18
            X: =13
            Y: =13
            Color: =RGBA(163, 163, 163, 1)
      - SearchInput:
          Control: Classic/TextInput
          Properties:
            HintText: ="Search..."
            Default: =""
            X: =44
            Y: =0
            Width: =Parent.Width - 44
            Height: =Parent.Height
            Color: =RGBA(255, 255, 255, 1)
            Fill: =RGBA(0, 0, 0, 0)
            BorderColor: =RGBA(0, 0, 0, 0)
            HoverBorderColor: =RGBA(0, 0, 0, 0)
            PressedBorderColor: =RGBA(0, 0, 0, 0)
            # Note: Classic/TextInput has no HintTextColor property — the hint
            # uses a lighter shade of Color automatically.
            Size: =14

Common use cases

Live gallery filtering

Bind the input's value into a Search() or Filter() over your gallery Items for instant results as the user types.

Lookup screens

Place it at the top of selection screens so users can find a record before drilling in.

Global app search

Use it in a header to search across multiple collections from one entry point.

How to use Search Bar 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 — Debounce with a small DelayOutput so the filter only recalculates after the user pauses typing on large datasets.

Related forms components

Toggle

Date Picker

File Upload

Simple Dropdown