---
title: TextField
description: TextField is a versatile input field that merchants can type into.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/textfield
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/textfield.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/textfield.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/textfield.md#guidelines)

# TextField

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

TextField is a versatile input field that merchants can type into.

It supports several input formats including numbers.

##### JavaScript

```ts
import {extend, TextField} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const textfield = root.createComponent(TextField, {
    label: 'Super text field',
    type: 'text',
    value: 'I can fly!',
    placeholder: 'Type a thing',
    multiline: 3,
    prefix: 'I typed:',
    suffix: 'into this text field',
    error: 'I hate to break this to you, but you cannot fly',
    onChange: (value) => console.log(value, ' was typed'),
    onInput: (value) => console.log(value, ' was typed'),
    onFocus: () => console.log('Welcome to the super field!'),
    onBlur: () => console.log('Left to do something else'),
    clearButton: true,
    onClearButtonPress: () => console.log('Clear that silly statement'),
  });

  root.appendChild(textfield);
  root.mount();
});
```

##### React

```tsx
import React from 'react';
import {extend, render, TextField} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <TextField
      label="Super text field"
      type="text"
      value="I can fly!"
      placeholder="Type a thing"
      multiline={3}
      prefix="I typed:"
      suffix="into this text field"
      error="I hate to break this to you, but you cannot fly"
      onChange={(value) => console.log(value, ' was typed')}
      onInput={(value) => console.log(value, ' was typed')}
      onFocus={() => console.log('Welcome to the super field!')}
      onBlur={() => console.log('Left to do something else')}
      clearButton
      onClearButtonPress={() => console.log('Clear that silly statement')}
    />
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| label | `string` | Human-readable label for the input. |
| type? | `"text" &#124; "search" &#124; "number"` | Input type |
| value? | `string` | Input value. |
| placeholder? | `string` | Hint text to display when no text is input |
| multiline? | `number &#124; boolean` | Allow for multiple lines of input. |
| prefix? | `string` | Text to display before the input value. |
| suffix? | `string` | Text to display after the input value. |
| error? | `string` | Error text to display beneath the label. |
| onInput? | `(value: string) => void` | Callback when value is changed. |
| onChange? | `(value: string) => void` | Callback when user leaves the input. |
| onFocus? | `() => void &#124; Promise<<wbr />void<wbr />>` | Callback when input is focused. |
| onBlur? | `() => void &#124; Promise<<wbr />void<wbr />>` | Callback when focus is removed. |
| clearButton? | `boolean` | Show a 'clear text' button in the input. |
| onClearButtonPress? | `() => void` | Callback when clear button is pressed. |

***

## Guidelines

* `TextField` will expand to the width of its container

| ✅ Do | 🛑 Don't |
| - | - |
| 📱 Stack `TextField` components vertically | 📱 Stack `TextField` components horizontally |
| Use TextField to capture merchant text input | |

For more guidelines, refer to Polaris' [Text Field best practices](https://polaris.shopify.com/components/selection-and-input/text-field#best-practices).

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/textfield.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/textfield.md#guidelines)