> Deprecated:
> Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to [purchase options extensions](/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.


```ts?title: "JavaScript"

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();
});


```

```tsx?title: "React"

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