---
title: SearchField
description: Captures search terms from merchants using a single-line input field. Includes visual styling to indicate search functionality, and an accessory to quickly clear the input.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/searchfield
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/searchfield.md
---

# Search​Field

Captures search terms from merchants using a single-line input field. Includes visual styling to indicate search functionality, and an accessory to quickly clear the input.

## Properties

* disabled

  boolean

  Default: false

  Disables the field, disallowing any interaction.

* id

  string

  A unique identifier for the element.

* placeholder

  string

  A short hint that describes the expected value of the field.

* value

  string

  The current value for the field. If omitted, the field will be empty.

## Events

Learn more about registering [events](https://shopify.dev/docs/api/pos-ui-extensions/using-polaris-components#events)

* blur

  (event: CallbackEvent<"s-search-field">) => void

  Callback when the field loses focus.

* change

  (event: CallbackEvent<"s-search-field">) => void

  Callback when the field loses focus after the user changes the value in the field.

* focus

  (event: CallbackEvent<"s-search-field">) => void

  Callback when the field is focused.

* input

  (event: CallbackEvent<"s-search-field">) => void

  Callback when the user changes the value in the field.

### CallbackEvent

* bubbles

  ```ts
  boolean
  ```

* cancelable

  ```ts
  boolean
  ```

* composed

  ```ts
  boolean
  ```

* currentTarget

  ```ts
  HTMLElementTagNameMap[T]
  ```

* detail

  ```ts
  any
  ```

* eventPhase

  ```ts
  number
  ```

* target

  ```ts
  HTMLElementTagNameMap[T] | null
  ```

```ts
interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-search-field placeholder="Search" />
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/search-field-default.png)

## Examples

SearchField usage patterns

### Examples

* #### Event handling

  ##### Description

  Handle search input events

  ##### Default

  ```jsx
  <s-search-field
    placeholder="Search products..."
    value=""
    onInput={(event) => 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')}
  />
  ```