---
title: TextField
description: Captures single-line text input from merchants. Use to collect short, free-form information.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/textfield
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsforms/textfield.md
---

# Text​Field

Captures single-line text input from merchants. Use to collect short, free-form information.

## Properties

* details

  string

  Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

  This will also be exposed to screen reader users.

* disabled

  boolean

  Default: false

  Disables the field, disallowing any interaction.

* error

  string

  Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

* id

  string

  A unique identifier for the element.

* label

  string

  Content to use as the field label.

* maxLength

  number

  Default: Infinity

  Specifies the maximum number of characters allowed.

* placeholder

  string

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

* required

  boolean

  Default: false

  Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.

* value

  string

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

## Slots

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

* accessory

  HTMLElement

  Additional content to be displayed in the field. Commonly used to display clickable text.

## Events

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

* blur

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

  Callback when the element loses focus.

* change

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

  Callback after editing completes (typically on blur).

* focus

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

  Callback when the element receives focus.

* input

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

  Callback when the user makes any changes 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-text-field
    label="Store name" 
    value="Snowdevil" 
    required
  />
  ```

## Preview

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

## Examples

Advanced usage patterns for TextField component

### Examples

* #### Event handling

  ##### Description

  Handle TextField events: onInput, onFocus, onBlur, and onChange.

  ##### Default

  ```jsx
  <s-text-field
    label="Product SKU"
    placeholder="Enter SKU"
    onInput={(event) => {
      console.log('Input:', event.currentTarget.value);
      console.log('Current error:', event.currentTarget.error);
    }}
    onFocus={(event) => {
      console.log('Focused with value:', event.currentTarget.value);
    }}
    onBlur={(event) => {
      console.log('Blurred with value:', event.currentTarget.value);
    }}
    onChange={(event) => {
      console.log('Changed to:', event.currentTarget.value);
    }}
  />
  ```

* #### Accessory slot

  ##### Description

  Add action buttons using the accessory slot. Only \`s-button\` and \`s-clickable\` are supported, with text content only

  ##### Default

  ```jsx
  <s-text-field label="Discount code" value="SUMMER2024">
    <s-button slot="accessory" onClick={() => console.log('Apply discount')}>
      Apply
    </s-button>
  </s-text-field>;
  ```

* #### Common props

  ##### Description

  Common TextField props for validation, constraints, and user guidance.

  ##### Default

  ```jsx
  <s-text-field
    label="Product SKU"
    value={sku}
    placeholder="Enter SKU"
    details="Use format: ABC-123"
    error={hasError ? "SKU already exists" : undefined}
    disabled={isProcessing}
    required
    maxLength={20}
    onChange={(event) => setSku(event.currentTarget.value)}
  />
  ```