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
Button Only
Search button without associated input
<!-- 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>
<!-- Button Only -->
<div class="info-srch-ctnr-pf">
<button class="action-btn-srch-015-pf">Open Search</button>
</div>
Find Location
FindLocation
Input + Button
Enter zip code or city to find nearby stores
With Location Icon
Location input with map pin icon
Use My Location
Button to use current location (geolocation)
Input Only (Enter to Search)
Press Enter to find locations
Sample Store Results
These would appear after a FindLocation event is triggered
Downtown Store
123 Main Street, San Francisco, CA 94102
0.3 miles away
Marina District
456 Chestnut Street, San Francisco, CA 94123
1.2 miles away
Mission Bay
789 Third Street, San Francisco, CA 94158
2.5 miles away
<!-- 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>
<!-- Button Only (Use My Location) -->
<div class="info-srch-ctnr-pf">
<button class="action-btn-loc-017-pf" style="width: 100%;">
Use My Location
</button>
</div>