---
title: Search field
description: >-
The search field component captures search terms for filtering and search
functionality. Use it to enable inline search within specific sections or
lists, like filtering products or searching customers.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/search-field
md: >-
https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/search-field.md
---
# Search field
The search field component captures search terms for filtering and search functionality. Use it to enable inline search within specific sections or lists, like filtering products or searching customers.
### Support Targets (9)
### Supported targets
* [pos.cart.line-item-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/cart-details#cart-details-action-modal-)
* [pos.customer-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-action-modal-)
* [pos.draft-order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-action-modal-)
* [pos.exchange.post.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-action-modal-)
* [pos.home.modal.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/home-screen#home-screen-action-modal-)
* [pos.order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-action-modal-)
* [pos.product-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-action-modal-)
* [pos.purchase.post.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-action-modal-)
* [pos.return.post.action.render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-action-modal-)
#### Use cases
* **Inline filtering:** Enable filtering of lists, tables, or content sections.
* **Quick search:** Provide search inputs for finding items within catalogs or data sets.
* **Real-time filtering:** Support filtering as users type with automatic clear functionality.
* **Contextual search:** Implement search within product variants, order items, or customer lists.
## Examples
### Enable search with a search field
Enable search functionality using a search field component. This example shows a basic search field with placeholder text.
## Enable search with a search field
### Handle search input events
Subscribe to search input events to respond when merchants enter search terms. This example demonstrates handling `onChange` and `onInput` events for real-time search functionality, debounced filtering, or triggering search API calls as merchants type their queries.
### Examples
* #### Enable search with a search field
##### Description
Enable search functionality using a search field component. This example shows a basic search field with placeholder text.
##### Default
```html
```
* #### Handle search input events
##### Description
Subscribe to search input events to respond when merchants enter search terms. This example demonstrates handling \`onChange\` and \`onInput\` events for real-time search functionality, debounced filtering, or triggering search API calls as merchants type their queries.
##### Default
```jsx
console.log('Input:', event.currentTarget.value)}
onChange={(event) => console.log('Change:', event.currentTarget.value)}
onFocus={(event) => console.log('Search focused')}
onBlur={(event) => console.log('Search blurred')}
/>
```
## Properties
Configure the following properties on the search field component.
* **disabled**
**boolean**
**Default: false**
Whether the field is disabled, preventing user interaction. Use when the field is temporarily unavailable due to application state, permissions, or dependencies.
* **id**
**string**
A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.
* **placeholder**
**string**
A short hint that provides guidance about the expected value of the field.
* **value**
**string**
The current search query text entered in the field. An empty string means no search query is entered.
## Events
The search field component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).
* **blur**
**(event: CallbackEvent<"s-search-field">) => void**
Called when the element loses focus.
* **change**
**(event: CallbackEvent<"s-search-field">) => void**
Called after editing completes, typically on blur.
* **focus**
**(event: CallbackEvent<"s-search-field">) => void**
Called when the element receives focus.
* **input**
**(event: CallbackEvent<"s-search-field">) => void**
Called when the user makes any changes in the field.
### CallbackEvent
Represents the event object passed to callback functions when interactive events occur. Contains metadata about the event, including the target element, event phase, and propagation behavior.
* bubbles
Whether the event bubbles up through the DOM tree.
```ts
boolean
```
* cancelable
Whether the event can be canceled.
```ts
boolean
```
* composed
Whether the event will trigger listeners outside of a shadow root.
```ts
boolean
```
* currentTarget
The element that the event listener is attached to.
```ts
HTMLElementTagNameMap[T]
```
* detail
Additional data associated with the event.
```ts
any
```
* eventPhase
The current phase of the event flow.
```ts
number
```
* target
The element that triggered the event.
```ts
HTMLElementTagNameMap[T] | null
```
## Best practices
* **Use for inline search and filtering:** Choose search field for filtering within specific sections or lists, not for global navigation or complex multi-step searches.
* **Follow placeholder pattern:** Use "Search {items}" format like "Search products" or "Search customers" to clarify scope.
* **Choose the right event:** Use `input` for real-time filtering as users type. Use `change` for expensive operations that should wait until typing completes.
* **Handle empty values:** When the field is cleared, reset filters or show all items appropriately.