Forms & Inputs

Button Search

Added Aug 10, 2026

A search input paired with an outline "Search" button, merged into one visually-connected group with a label above. Inspired by the shadcn/ui InputButtonGroup (Field + ButtonGroup) composition.

CopySnips Live Preview

How to Use

On the Settings tab, edit the field label, input placeholder, and button text. The Preview tab and the copyable YAML update together.
Paste the YAML into Power Apps Studio (Ctrl+V). One GroupContainer (conButtonSearch) is added. Everything nests inside it via Vertical/Horizontal AutoLayout, so it reflows correctly if you resize it.
The input and button are visually merged into one group: a thin 2px inset padding frames the pair, and only the OUTER corners are rounded (RadiusTopLeft/RadiusBottomLeft on the input, RadiusTopRight/RadiusBottomRight on the button) so they read as a single connected control, matching the shadcn/ui ButtonGroup look.
Clicking Search shows a confirmation toast (Notify()) with the typed text, or a warning toast if the input is empty. Both are placeholders; wire btnButtonSearchAction.OnSelect to your real search logic once connected. Read the typed query from txtButtonSearchInput.Text at any time.
No OnVisible initialisation needed: the input starts blank.

Problem Solved

Provides a ready-made search-input-plus-button pairing, visually merged into one control the way shadcn/ui's ButtonGroup renders it. Power Apps has no native "grouped controls" primitive, so this is normally hand-built corner-radius-by-corner-radius each time.

Integration

All content is plain text substituted directly into the copied YAML (no settings-driven array/formula). Read the typed search query from txtButtonSearchInput.Text and wire btnButtonSearchAction.OnSelect to your real search/filter logic once connected.

- conButtonSearch:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      DropShadow: =DropShadow.None
      Height: =70
      LayoutAlignItems: =LayoutAlignItems.Stretch
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =6
      PaddingBottom: =5
      PaddingLeft: =5
      PaddingRight: =5
      PaddingTop: =5
      Width: =315
      X: =20
      Y: =20
    Children:
      - lblButtonSearchLabel:
          Control: Label@2.5.1
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            Color: =RGBA(15, 23, 42, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =18
            LayoutMinWidth: =0
            Size: =12
            Text: ="Search"
      - conButtonSearchGroup:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =40
            LayoutAlignItems: =LayoutAlignItems.Stretch
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutMinWidth: =0
            PaddingBottom: =2
            PaddingLeft: =2
            PaddingRight: =2
            PaddingTop: =2
          Children:
            - txtButtonSearchInput:
                Control: Classic/TextInput@2.3.2
                Properties:
                  AlignInContainer: =AlignInContainer.Center
                  BorderColor: =RGBA(226, 232, 240, 1)
                  BorderThickness: =1
                  Color: =RGBA(15, 23, 42, 1)
                  Default: =""
                  FillPortions: =1
                  Font: =Font.'Open Sans'
                  Height: =Parent.Height - 2
                  HintText: ="Type to search..."
                  LayoutMinWidth: =0
                  RadiusBottomLeft: =8
                  RadiusBottomRight: =0
                  RadiusTopLeft: =8
                  RadiusTopRight: =0
                  Size: =11
            - btnButtonSearchAction:
                Control: Classic/Button@2.2.0
                Properties:
                  AlignInContainer: =AlignInContainer.Center
                  BorderColor: =RGBA(226, 232, 240, 1)
                  BorderThickness: =1
                  Color: =RGBA(15, 23, 42, 1)
                  DisabledBorderColor: =RGBA(226, 232, 240, 1)
                  Fill: =RGBA(255, 255, 255, 1)
                  FocusedBorderColor: =RGBA(226, 232, 240, 1)
                  FocusedBorderThickness: =1
                  Font: =Font.'Open Sans'
                  Height: =Parent.Height - 2
                  HoverBorderColor: =RGBA(203, 213, 225, 1)
                  HoverColor: =RGBA(15, 23, 42, 1)
                  HoverFill: =RGBA(248, 250, 252, 1)
                  OnSelect: =If(IsBlank(Trim(txtButtonSearchInput.Text)), Notify("Please enter a search term.", NotificationType.Warning), Notify("Searching for " & txtButtonSearchInput.Text, NotificationType.Information))
                  PressedBorderColor: =RGBA(203, 213, 225, 1)
                  PressedFill: =RGBA(241, 245, 249, 1)
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =8
                  RadiusTopLeft: =0
                  RadiusTopRight: =8
                  Size: =11
                  Text: ="Search"
                  Width: =90

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

Button Search

Content

How to Use

Problem Solved

Integration

YAML Code

Implementation