PixelFlow
Search Events
Try these search inputs and watch the Event Monitor panel to see events fire in real-time.
Search
Search
Input + Button (Horizontal)
Standard search with input field and button side by side
Input + Button (Vertical)
Search with full-width button below input
Input Only (Enter to Search)
Press Enter key to trigger search event
<!-- Input + Button (Horizontal) -->
<div class="info-srch-ctnr-pf">
<input
type="text"
class="action-inpt-srch-014-pf"
placeholder="Search products..."
/>
<button class="action-btn-srch-015-pf">Search</button>
</div>
<!-- Input + Button (Vertical) -->
<div class="info-srch-ctnr-pf" style="display: flex; flex-direction: column; gap: 0.5rem;">
<input
type="text"
class="action-inpt-srch-014-pf"
placeholder="What are you looking for?"
/>
<button class="action-btn-srch-015-pf" style="width: 100%;">
Search Products
</button>
</div>
<!-- Input Only (Enter key triggers search) -->
<div class="info-srch-ctnr-pf">
<input
type="text"
class="action-inpt-srch-014-pf"
placeholder="Search and press Enter..."
/>
</div>
Find Location
FindLocation
Input + Button
Enter zip code or city to find nearby stores
With Location Icon
Location input with map pin icon
Input Only (Enter to Search)
Press Enter to find locations
<!-- Input + Button -->
<div class="info-srch-ctnr-pf">
<input
type="text"
class="action-inpt-loc-016-pf"
placeholder="Enter zip code or city..."
/>
<button class="action-btn-loc-017-pf">Find Stores</button>
</div>
<!-- Input Only (Enter key triggers search) -->
<div class="info-srch-ctnr-pf">
<input
type="text"
class="action-inpt-loc-016-pf"
placeholder="Enter address and press Enter..."
style="width: 100%;"
/>
</div>